收起slideToggle在Click jQuery上

Question

我目前正在嘗試制作需要大量JavaScript的側邊欄菜單； 在單擊時使菜單項在班級中處於活動狀態，而在單擊另一個項時使其不處於活動狀態。 我遇到的問題是某些菜單項具有子菜單項。 現在，當我使用jQuery單擊它們時，它們會滑動打開，但是當我單擊另一個項目時，它們也會滑動以打開。 我正在嘗試這樣做，以便當我單擊其他項目時，在其他項目上撤消了slidetoggle

如果我的英語不好我很抱歉，但我希望所有人都明白我在說什么

這是一個jsFiddle

<script>
$(document).ready(function(){
    var guts = $('#guts').css('display');
    var guts2 = $('#guts2').css('display');
    var guts3 = $('#guts3').css('display');
  $("#click").click(function(){
        $("#guts").slideToggle("fast"); 
        if (guts2 == 'block')
            $("#guts2").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
  $("#click2").click(function(){
        $("#guts2").slideToggle("fast");
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
    $("#click3").click(function(){
        $("#guts3").slideToggle("fast");
                if (guts2 == 'block')
        $("#guts2").slideToggle("fast");
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
    $("#home").click(function(){
        $(this).addClass("active").siblings('.active').removeClass('active');
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        if (guts2 == 'block')
            $("#guts2").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
  });
});
</script>       
    <div id="links">

        <a href="#/Home" id="home" class="active">Home</a>
        <a href="#/Staff" id="click">Staff</a>
            <div id="guts">
                <a href="#" class="guts">• Staff List</a>
            </div>
        <a href="#/Locations" id="click2">Locations</a>
            <div id="guts2">
                <a href="#" class="guts">• Location List</a>
            </div>
        <a href="#/Calendar" id="click3">Calendar</a>   
    </div>

Answer 1

您的變量超出了您想要發生的事情的范圍。 您正在全局聲明它們，並且在調用每個click函數時，它們不會更新變量，而是會捕獲該變量在頁面加載時最初是什么，即'none' 。

將變量放在函數內部，以便在調用它們時更新這些變量。

代替：

var guts = $('#guts').css('display');
var guts2 = $('#guts2').css('display');
var guts3 = $('#guts3').css('display');
$("#click").click(function(){
    $("#guts").slideToggle("fast"); 
    if (guts2 == 'block')
        $("#guts2").slideToggle("fast");
    if (guts3 == 'block')
        $("#guts3").slideToggle("fast");
    $(this).addClass("active").siblings('.active').removeClass('active');
});

做：

$("#click").click(function(){
    var guts = $('#guts').css('display');
    var guts2 = $('#guts2').css('display');
    var guts3 = $('#guts3').css('display');
    $("#guts").slideToggle("fast");
    if (guts2 == 'block') {
        $("#guts2").slideToggle("fast");
    }
    if (guts3 == 'block') {
        $("#guts3").slideToggle("fast");
    }
    $(this).addClass("active").siblings('.active').removeClass('active');
});

可選地：

var guts, guts2, guts3;

$("#click").click(function(){
    guts = $('#guts').css('display');
    guts2 = $('#guts2').css('display');
    guts3 = $('#guts3').css('display');
    $("#guts").slideToggle("fast");
    if (guts2 == 'block') {
        $("#guts2").slideToggle("fast");
    }
    if (guts3 == 'block') {
        $("#guts3").slideToggle("fast");
    }
    $(this).addClass("active").siblings('.active').removeClass('active');
});

演示

Answer 2

我已經使用無序列表菜單（我最喜歡菜單）重寫了代碼。 我沒有為每個菜單項添加click事件，而是添加了一個處理所有事件的事件（如果您要向任何項目添加自定義內容，則可以使用條件語句將其包括在內）

HTML：

<ul id="links">
    <li><a href="#/">Home</a></li>
    <li><a href="#/locations">Locations</a>
        <ul class="submenu">
            <li><a href="#/locations/list">Location List</a></li>
        </ul>
    </li>
    <li><a href="#/staff">Staff</a>
        <ul class="submenu">
            <li><a href="#/staff/list">Staff List</a></li>
        </ul>
    </li>
    <li><a href="#/calendar">Calendar</a></li>
</ul>

Java腳本

$(document).ready(function () {

    $('#links a').click(function () {

        if (!$(this).hasClass('.active')) {
            $('.active').removeClass('active');
            $(this).addClass('active');
        }

        if ($(this).hasClass('toggled')) {

            $(this).removeClass('toggled');
            $(this).next().slideToggle(250);

        } else if ($(this).next('ul').length > 0) {

                $('.toggled').next().slideToggle(250);
                $('.toggled').removeClass('toggled');
                $(this).addClass('toggled');
                $(this).next().slideToggle(250);

        } else if(!$(this).parent().parent().hasClass('submenu')) {

                $('.toggled').next().slideToggle(250);
                $('.toggled').removeClass('toggled');

        }

    return false;

    })

});

最后是一些CSS：

#links,
#links ul{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#links a {
  display: block;
  padding: 1px 0
}

#links a.active {
    background-color: rgb(0, 173, 255);
}

#links ul{
    display: none
}

檢查演示