jQuery问题切换多个元素

时间:2014-08-07 16:31:23

标签: jquery wordpress

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;。

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

谢谢。

1 个答案:

答案 0 :(得分:3)

您的代码正在按预期工作,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