metro ui css tile element-selected并不起作用

Question

Visual Studio 2013，ASP.NET Web表单，metro 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

这就是我选择和取消选择工作的方式：

$("[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")})

它的工作原理。