Question

所以我已经开始工作，它显示/隐藏了UL / LI，但是我不确定我在哪里做错了＃＆＃ 39;没有换掉+/-标志？

这是我的JS：

$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
    $(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});

我有一个类设置来附加带有li:before的li，它在具有嵌套ul的li之前添加+符号。但是我不确定我是否正确地换掉这些标志。

这是我做的小提琴：

http://jsfiddle.net/bc4mg13a/

Answer 1

您的代码令人难以置信的冗长。好吧，至少你的js。我修改过的代码Here's a fiddle。

我没有立即在页面加载中使用js隐藏所有菜单，而是将CSS display: none;应用于子菜单类：

.sub-menu {
  display: none; 
}

js被清理了一下，由于点击处理程序绑定到.menu-item-has-children，你实际上只是点击它来显示所包含的UL。

看一看。希望它有所帮助：）

Answer 2

只需添加：

$(this).toggleClass('open');

对此：

if (this == e.target) {
    $(this).children('ul').slideToggle();
    $(this).toggleClass('open'); // <--
}

Answer 3

您可以在$(this).toggleClass('open');之前添加return false，但我会更深入地了解您的代码正在做什么。我不太确定之前的界限是做什么的。

Answer 4

关于你如何设置，我会尝试......

    $(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
    if (this == e.target) {
        $(this).toggleClass("open");
        $(this).children('ul').slideToggle();
    }
    return false;
});

其他：

对于格式化，您可能希望执行以下操作：

.menu-item-has-children {
    &:before {
        content:"+ ";
        color: $white;
        width: 10px;
        display:inline-block;
    }
}
.open {
    &:before {
        content:"- ";
        color: $white;
        width: 10px;
        display:inline-block;
    }
}

Answer 5

修正了JS：

$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
    if (this == e.target) {
        $(this).children('ul').slideToggle();
        $(this).toggleClass('open'); // added
    }
    return false;
});

刚刚添加＆＃34; $（this）.toggleClass（＆＃39; open＆＃39;）;＆＃34;使用您在CSS中指定的类，而不是尝试手动操作文本。

Answer 6

您可以这样做并添加$(this).toggleClass('open');

http://jsfiddle.net/bc4mg13a/5/

Answer 7

你去了：http://jsfiddle.net/bc4mg13a/13/

$(".menu-item-has-children").on("click", function(e){
  e.stopPropagation();
  var clickedLi = $(this);
  $("> ul", clickedLi).slideToggle();
  clickedLi.toggleClass("current"); 
});

首先，你的第一个js行是一个有太多冗余的东西。

$（＆＃34; .top ul li：not（：has（li.current））＆＃34;）。find（＆＃34; ul＆＃34;）。hide（）。end（）/ /隐藏所有其他UL .click

可能是：

$（＆＃34; .top ul li：not（.current）＆＃34;）。find（＆＃34; ul＆＃34;）。hide（）。end（）//隐藏所有其他UL 。点击

另一方面，我稍微改变了你的代码，简化了选择器。在每次li点击，我选择直接ul儿童，并在i slidetoggle +切换类＆＃39;当前＆＃39;类。

我也通过css上的当前班级切换加号。

Answer 8

您不需要使用text(this.toggle ? "-" : "+");

在条件中，只需切换已在SCSS / CSS中定义的类.open。

喜欢这样 -

$(this).toggleClass('open');

<强> JSFiddle

显示/隐藏加减号

8 个答案: