HTML

Question

HTML

<p>Navigation link 1 <span class="toggle"></span></p>
<ul class="sub-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<p>Navigation link 2 <span class="toggle"></span></p>
<ul class="sub-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<p>Navigation link 3 <span class="toggle"></span></p>
<ul class="sub-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<p>Navigation link 4 <span class="toggle"></span></p>
<ul class="sub-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

CSS

.sub-menu {
    display: none;
}

span.toggle {
    display: inline-block;
    width: 30px;
    height: 42px;
    position: absolute;
    z-index: 1;
    top: 7px;
    right: 35px;
    line-height: 42px;
    font-size: 1.5em;
    text-align: center;
    cursor: pointer;
}

span.toggle::before {
    content: "+";
}

span.toggle.on::before {
    content: "-";
}

JS

jQuery(document).ready(function() {

    jQuery( ".toggle" ).click(function() {

        jQuery(this).toggleClass("on");

        if(jQuery(".sub-menu").is(":visible")) {
            jQuery(".sub-menu").css("display", "none");
        } else {
            jQuery(this).next().css("display", "block");
        }

    });

});

在页面上，您可以看到

导航1 导航2 导航3 导航4

点击每个导航元素旁边的切换，即可显示.sub-menu。如果再次按下切换按钮，则会使.sub-menu消失。

问题＃1 如果一个.sub菜单已经可见，通过点击另一个切换使第一个切换消失，但它不会触发预期的.sub菜单。

问题＃2 如果一个.sub菜单已经可见，通过点击另一个切换按钮，不会将第一个更改为＆＃34; - ＆＃34;到＆＃34; +＆＃34;。

我有什么想法可以解决这个问题吗？

谢谢。

Answer 1

您的代码正在按预期工作，IMO。你说的是：

“当我点击一个带有'切换'类的元素时，切换是否   clicked元素具有“on”类。

现在，如果任何带有“子菜单”类的元素可见，则隐藏   那。否则（如果没有任何带有“子菜单”类的元素可见）   ...显示下一个元素。

尝试：

$( ".toggle" ).click(function() {
    var $self = $(this);
    var $nextUl = $self.parent().next();
    $('.toggle').not($self).removeClass("on");
    $(".sub-menu").not($nextUl).hide();

    $self.toggleClass("on");
    $self.parent().next().toggle();
});

另请注意，您点击<span>内的<p>，因此.next（）会找到<p>中的下一个元素。在调用.parent()之前，您需要向上移动一级（使用.next()）。

检查工作jsFiddle。

jQuery问题切换多个元素

HTML

CSS

JS

1 个答案: