metro ui css tile element-selected 不起作用

Question

Visual Studio 2013，ASP.NET 网络表格，地铁 UI CSS 3.0

我正在尝试创建一个选择的磁贴元素，它看起来像本网站中的那个 http://metroui.org.ua/tiles.html

<div class="tile bg-green fg-white element-selected" data-role="tile">
   <div class="tile-content iconic">
      <span class="icon mif-home"></span>
      <div class="tile-label"></div>
   </div>
</div>

我的代码创建了一个像上面这样的图块，选中了勾号图标，但是当我按下图块时，勾号图标没有取消选中，因为它应该是！

我在这里想要的是创建一个磁贴，当用户点击它时会显示一个勾号图标，当用户再次点击它时会取消选中。

希望有人能帮助我！

Answer 1

这就是我使 select 和 deselect 工作的方式：

$("[data-role='tile']").click(function(){
    if($(this).hasClass("element-selected")){
        $(this).removeClass("element-selected");
    }else{
        $(this).addClass("element-selected");
    }
});

Here is the link to the JSFiddle demo

Answer 2

在我的例子中，我不知道为什么，磁贴点击了第二次。

我使用：

$('.class').mousedown(function(event) {$(this).toggleClass("selected")})

而且有效。

metro ui css tile element-selected 不起作用

metro ui css tile element-selected doesn't work

javascript

html

css

tile

metro-ui-css