Question

我的代码是：

$(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类？

一如既往的帮助。

Answer 1

你不应该只检查当前元素是否具有.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类设置箭头样式

小提琴here。

简单但向您展示您可以做的事情。

Answer 2

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

$(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 */
   });
});

Answer 3

您可以从所有人中删除课程.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");
        }


    });
});

单击时Jquery切换类，如果单击另一个菜单项，则删除类

3 个答案: