Bootstrap可折叠菜单在打开一个子菜单时关闭所有其他子菜单

时间：2017-05-27 20:34:12

标签： javascript jquery html css twitter-bootstrap

我正在使用Bootstrap编写侧边菜单，我已经处于相当不错的舞台上。子菜单正在打开 我的问题：如果我点击一个子菜单，它会显示子链接，但是当打开第二个子菜单时，它不会打开该链接。所以我搜索了一个解决方案并找到了这个：Stackoverflow Answer。我将代码和javascript文件调整为更改。现在，在我的localhost安装上打开菜单时，它在打开或关闭时会稍微滞后，但它会关闭所有其他打开的菜单。所以我想问一下这里是否有人有更好的解决方案或想法为什么它会落后那么多。代码很长，所以我只发帖JSfiddle：klick here。

1 个答案:

答案 0 :(得分：1)

来自jQuery doc：

  

.slideToggle()：默认持续时间400毫秒

     

.toggle()：默认持续时间400毫秒

这些是你的问题。无论如何，您始终可以使用boostrap collapse methods。

＆＃13;
＆＃13; 
//
// for each collapseable element, except the first, collapse (hide)
//
$('#side-menu ul.collapseable:visible:not(:first)').collapse('hide');

//
// clicking on the collapse anchor:
// get the css selector for the collapsible element
// collapse to hide all except the current one
// collapse to show the current one
//
$('#side-menu a[data-toggle="collapse"]').on('click', function (e) {
    var ulId = this.getAttribute('href');
    $('#side-menu ul.collapseable').not(ulId).collapse('hide');
    $(ulId).collapse('show');
});
＆＃13; 
html, body {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eaeaea;
    color: #5e6062;
    height: 100%;
}

/*-------------*/
/*Sidebar Menue*/
/*-------------*/

#side-menu {
    background-color: #323232;
    padding: 0px;
}

#side-menu h1 {
    color: #fff;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
}

#side-menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#side-menu a {
    padding: 12px 20px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    display: block;
}

#side-menu a:hover {
    background-color: #474747;
    display: block;
    color: #fff;
}

#side-menu .active a {
    color: #fff;
    background-color: #474747;
}

#side-menu .settings-btn {
    background-color: #778b1c;
}

#side-menu .settings-btn a {
    color: #fff;
}

#side-menu .settings-btn a:hover {
    background-color: #778b1c;
}

#side-menu .collapseable li {
    padding: 2px 0px 2px 12px;
}

#side-menu .collapseable a {
    color: #fff;
    font-size: 12px;
    padding: 0px 10px 0px 5px;
    text-decoration: none;
    display: block
}

#side-menu .collapseable a:hover {
    color: #fff;
}

/*ALTIS Side-Menü linker Rand*/
#side-menu .collapseable-ALTIS {
    border-left: 4px solid #ffb700;
}

#side-menu .collapseable-ALTIS .active {
    background-color: #474747;
}

#side-menu .collapseable-ALTIS .link:hover {
    background-color: #474747;
}

/*---------------------------*/

/*TANOA Side-Menü linker Rand*/
#side-menu .collapseable-TANOA {
    border-left: 4px solid #00aa1a;
}

#side-menu .collapseable-TANOA .active {
    background-color: #474747;
}

#side-menu .collapseable-TANOA .link:hover {
    background-color: #474747;
}

/*---------------------------*/

/*--------------------*/
/*Main Content Bereich*/
/*--------------------*/

.display-table {
    display: table;
    padding: 0px;
    height: 100%;
    width: 100%;
}

.display-table-row {
    display: table-row;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%;
}

/*----------------*/
/*Top Menue Leiste*/
/*----------------*/

#nav-header {
    background-color: #fff;
    border-bottom: 1px solid #e7eaec;
}

#nav-header ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #676a6c;
}

#nav-header ul li {
    float: left;
    margin-left: 15px;
    padding: 17px 0px;
}

#nav-header ul a {
    text-decoration: none;
}

#nav-header .logout {
    color: #676a6c;
}

#nav-header .logout:hover {
    color: #676a6c;
}

#nav-header #welcome {
    margin-right: 20px;
}

/*-----------------------*/
/*Mobile Menu Toggle Icon*/
/*-----------------------*/

.navbar-default .navbar-toggle {
    border-color: #778b1c;
    background-color: #778b1c;
}

.navbar-default .navbar-toggle:hover {
    background-color: #778b1c;
}

.navbar-default .navbar-toggle:focus {
    background-color: #778b1c;
}

.navbar-default .icon-bar {
    border: 1px white solid;
}

/*------*/
/*Inhalt*/
/*------*/

#content header {
    border-bottom: 1px #f3f3f4 solid;
    padding: 10px 0px;
}

#content {
    margin: 20px 0px 50px 0px;
    background-color: #fff;
    border-top: 4px #778b1c solid;
}

.content-ALTIS {
    border-top: 4px #ffb700 solid !important;
}

.page_title {
    font-size: 14px;
    font-weight: bold;
    margin: 0px 20px;
}

.content-inner {
    padding: 20px;
}

.content-inner a {
    text-decoration: underline;
    color: #2b5f8b;
}

.valign-top {
    vertical-align: top;
}

.valign-center {
    vertical-align: middle;
}

.horizontal-middle {
    margin: 0px auto;
    display: block;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<main class="container-fluid display-table">

    <!-- Menu -->
    <div class="col-lg-2 c display-table-cell valign-top" id="side-menu">
        <!-- Logo -->
        <ul>
            <!-- Startseite -->
            <li class="link active">
                <a href="#">
                    <i class="fa fa-fw fa-home" aria-hidden="true"></i>
                    Text 1
                </a>
            </li>

            <!-- ALTIS Dropdown Menu -->
            <li class="link">
                <a href="#collapse-ALTIS" data-toggle="collapse" aria-controls="collapse-ALTIS" id="ALTIS"
                   href="#collapse-ALTIS"  aria-expanded="true">
                    Text 2
                </a>
                <ul class="collapseable collapseable-ALTIS collapse in" id="collapse-ALTIS" aria-expanded="true">
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                </ul>
            </li>

            <!-- TANOA Dropdown Menu -->
            <li class="link">
                <a href="#collapse-TANOA" data-toggle="collapse" aria-controls="collapse-TANOA" id="TANOA">
                    Text 3
                </a>
                <ul class="collapse collapseable collapseable-TANOA" id="collapse-TANOA">
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                </ul>
            </li>

            <!-- KOTH Dropdown Menu -->
            <li class="link">
                <a href="#collapse-KOTH" data-toggle="collapse" aria-controls="collapse-KOTH" id="KOTH">
                    Text 4
                </a>
                <ul class="collapse collapseable collapseable-KOTH" id="collapse-KOTH">
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                </ul>
            </li>

            <!-- TOOLS Dropdown Menu -->
            <li class="link">
                <a href="#collapse-TOOLS" data-toggle="collapse" aria-controls="collapse-TOOLS" ID="TOOLS">
                    Text 5
                </a>
                <ul class="collapse collapseable collapseable-TOOLS" id="collapse-TOOLS">
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-search hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-refresh hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                </ul>
            </li>

            <!-- FILTER Dropdown Menu -->
            <li class="link">
                <a href="#collapse-FILTER" data-toggle="collapse" aria-controls="collapse-FILTER" id="FILTER">
                    Text 6
                </a>
                <ul class="collapse collapseable collapseable-FILTER" id="collapse-FILTER">
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-globe hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-shield hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-eye hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-address-book hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                    <li class="link">
                        <a href="#">
                            <i class="fa fa-fw fa-database hidden-xs" aria-hidden="true"></i> Text
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Einstellungen -->
            <li class="link settings-btn">
                <a href="#">
                    <i class="fa fa-fw fa-cog hidden-xs" aria-hidden="true"></i>
                    Text 7
                </a>
            </li>
        </ul>
    </div>

    <section class="col-md-10 col-sm-11 display-table-cell valign-top">
        <!-- vertikales Menu -->
        <aside class="row">
            <header id="nav-header" class="clearfix">
                <div class="col-md-7">
                    <nav class="navbar-default pull-left">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas"
                                data-target="#side-menu">
                            <span class="sr-only">Navigation aufklappen und zuklappen</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </nav>
                </div>

                <!-- Menu oben rechts -->
                <div class="col-md-5">
                    <ul class="pull-right">
                        <li id="welcome" class="hidden-xs">Welcome</li>
                        <li>
                            <a href="#" class="logout">
                                <i class="fa fa-fw fa-sign-out hidden-xs" aria-hidden="true"></i> Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </header>
        </aside>

        <!-- Seiteninhalt -->
        <div id="content">
            <header>
                <h2 class="page_title">Title</h2>
            </header>

            <div class="content-inner">
                Content
            </div>
        </div>
    </section>
</main>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题