显示/隐藏加减

Question

所以我已经让它工作了，它显示/隐藏了 UL 的/ LI，但我不确定我在没有换出 +/- 符号的情况下做错了什么？

这是我的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:beforeli 的 li ，在具有嵌套 ul 的 li 之前添加 + 符号。但我不确定我是否会以正确的方式更换标志。

这是我制作的小提琴：

http://jsfiddle.net/bc4mg13a/

Answer 1

你去吧： 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 行有很多多余的东西。

$(".top ul li:not(:has(li.current))").find("ul").hide().end() // 隐藏所有其他 UL .click

可能：

$(".top ul li:not(.current)").find("ul").hide().end() // 隐藏所有其他 UL .click

另一方面，我稍微改变了你的代码，简化了你的选择器。每次单击 li 时，我都会选择直接 ul 子级，并且 i 滑动切换 + 切换类将选择“当前”类。

我还通过CSS上的当前类切换加号。