Collapse slideToggle on Click jQuery

Collapse slideToggle on Click jQuery

本文关键字：jQuery Click on slideToggle Collapse      更新时间：2023-09-26

我目前正试图使一个侧边栏菜单，需要大量的javascript;在类中单击菜单项时使其处于活动状态，而在单击另一项时使其处于非活动状态。我遇到的问题是一些菜单项有子菜单项。当我使用jQuery点击它们时，它们会滑动打开，但当我点击另一个项目时，它们也会滑动打开。我想让它，当我点击一个不同的项目，滑动切换是取消在其他项目

我很抱歉，如果我的英语很差，但我希望所有人都能理解我在说什么

这是一个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>

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

我使用无序列表菜单(我最喜欢的菜单)重写了代码。我没有为每个菜单项添加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>
Javascript 

$(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
}

检查DEMO

相关文章：