javascript - 单击 jQuery 时折叠 slideToggle

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

您的变量超出了您希望发生的范围。您在全局声明它们，当调用每个点击函数时，它不会更新变量，它会获取变量最初在页面加载时的内容，即 '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');
});

DEMO