Javascript 使用加号/减号显示/隐藏

因此，我已经让它工作，它显示/隐藏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:before

在具有嵌套ul的li之前添加+符号来附加li。但我不确定我是否用正确的方式来交换这些标志

这是我做的小提琴：

只需添加：

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

为此：

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

if（this==e.target）{
$（this.children（'ul'）.slideToggle（）；
$（this）.toggleClass（'open'）；//您只需在返回false之前添加
$（this）.toggleClass（'open'）；
，但我会更深入地了解您的代码在做什么。我不太确定之前的行是否在做任何事情。
关于如何设置它，我会尝试

    $(".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;
    }
}

固定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;
});

只添加了“$（this）.toggleClass（'open'）；”，以使用CSS中指定的类，而不是尝试手动操作文本。
您可以这样做，并添加
$（this）.toggleClass（'open'）；

您的代码感觉异常冗长。好吧，至少我对您的js.代码做了一点修改

我没有在pageload上立即用js隐藏所有菜单，而是将CSS
display:none；
应用于子菜单类：

.sub-menu {
  display: none; 
}

js被清理了一点，因为点击处理程序绑定到
。菜单项有子菜单项
，所以您实际上只需点击它来显示包含的UL

看一看。希望它有帮助：）
好了：

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

$（“.top ul li:not（：has（li.current）））。查找（“ul”）.hide（）.end（）//隐藏所有其他ul
.点击

可以是：

$（“.top ul li:not（.current）”）.find（“ul”）.hide（）.end（）//隐藏所有其他ul
.点击

另一方面，我稍微更改了您的代码，简化了选择器。每次单击li时，我都会选择direct ul children，而i slidetoggle+toggle类则是“current”类

我还通过css上的当前类切换加号。
您不需要使用
文本（this.toggle？”-“：”+”；

在条件内部，只需切换已在SCSS/CSS中定义的类
。打开

像这样-

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

检查。希望它能帮助您找到解决方案。我发布了一个答案，但我建议使用一个不太详细的选择器。在这种情况下，您有一个类：
菜单项有子项
，您可以将其挂接到该类中，如果您改为使用CSS隐藏所有子项，则在该类中附加单击处理程序将获得相同的效果
sub-nav
uls感谢您的回复！是的，这是我试图集成到wordpress侧边栏菜单中的拼凑代码之一。此外，如果您单击其中一个孩子li，StopRopagation将有助于避免问题，因为家长li也会收到该事件。谢谢！这对其他人很有效，即使是
e.stopPropagation（）
它仍然会让其他孩子触发
滑动切换
真的吗？我添加了StopperPagation就是为了避免这种情况发生。在我这方面，测试时，只有点击的“+”打开。哈。这很奇怪。是的，不管发生什么，它都会不断触发。我想知道这是不是浏览器的东西。谢谢！是的，它是从一些浏览器拼凑起来的我发现的其他一些代码。所以，这是其中的一个“好吧，我让这部分工作，另一部分如何”。这是JS的一件事，我觉得实现相同结果的方法总是不止一种。当然！我想我只是一个干净代码的粉丝。这是其中一件事，我看了看，然后问“我能让这少一些文字吗？”因为最后我可能会用评论把它弄得乱七八糟，但我很高兴这能帮到你：）我在想，你知道如何让它停止滑动，如果其中一个李的链接中有一个吗？我只是注意到了这一点，并更新了小提琴。
$(this).toggleClass('open');