2

我的代码是：

$(document).ready(function() {
    $(".more").click(function(e) {
        $(this).toggleClass("open");
        if (!$(".more").hasClass(".icon-arrow-down")) {
            // alert('Yep has class');
            $(this).toggleClass("icon-arrow-down");
            $(this).toggleClass('icon-arrow-up');
        } 
        else { 
            // alert('all ok');
        }    
    });
});

有点乱，因为我正在测试一些东西。基本上我有一个菜单，.more为下拉菜单添加了一个类。移动设备上的人点击更多，这会在菜单中添加一个类，.open以便人们可以看到它。现在我的问题是，这段代码似乎不能 100% 工作。

有时课程会变得混乱，我最终打开了一个菜单，但icon-arrow-down仍然是一类。

而且，如果单击另一个按钮，我将如何添加一些内容以便open删除该类？more

一如既往的帮助表示赞赏。

4

3 回答 3

4

您不应该只是检查当前元素是否具有 .icon-arrow-down 类。所以而不是

if (!$(".more").hasClass(".icon-arrow-down"))

这个

if (!$(this).hasClass(".icon-arrow-down"))

也许考虑使用

$(".more").click(function(e) {

        if( $(this).hasClass("open") ) {
            $(this).removeClass("open").addClass("closed");
        } else {
            // if other menus are open remove open class and add closed
            $(this).siblings().removeClass("open").addClass("closed"); 
            $(this).removeClass("closed").addClass("open");
        }

});

然后使用 .open 和 .closed 类来设置你的箭头样式

在这里拉小提琴。

简单但向您展示了您可以做什么。

于 2012-11-22T10:46:39.417 回答
4

在菜单中，我总是使用这样的东西：

$(document).ready(function() {
   $(".more").click(function(e) {
      if($(this).hasClass("open")) {
         // if it's open then just close it
         $(this).removeClass("open");
      } else {
         // if it's closed, then close everything else and open it
         $(".more").removeClass("open");
         $(this).addClass("open");
      }
      /* TODO: now do something similar with icon-arrow */
   });
});
于 2012-11-22T10:59:28.287 回答
0

您可以从所有类中删除该类.open，然后将其添加到单击的类中：

$(document).ready(function() {
    var $more = $(".more");
    $more.click(function(e) {
        var $this = $(this);
        if ($this.hasClass("open") {
            $more.removeClass("open");
        } else {
            $more.removeClass("open");
            $this.addClass("open");
        }


    });
});
于 2012-11-22T10:59:29.143 回答