引导-同时切换导航和手风琴面板

Bootstrap - Toggle navigation and accordion panel simultaneously

本文关键字：手风琴导航引导更新时间：2023-09-26

我想有一个菜单按钮，打开一个自定义的slide-in导航和一个特定的bootstrap accordion面板(在导航内)同时点击。我有滑动菜单和手风琴独立工作。button目前打开菜单，但无法弄清楚如何让它也扩展面板。理想情况下，我希望面板打开后，菜单打开轻微的delay。

请查看此工作JSFIDDLE了解详细信息

谢谢!

jQuery(document).ready(function($) {
    var open = false;
    var openSidebar = function() {
        $('.menu--slide-right').addClass('is-active');
        $('.toggle-menu').addClass('is-active');
        $('#toggle-menu').addClass('toggle-close');
        open = true;
    }
    var closeSidebar = function() {
        $('.menu--slide-right').removeClass('is-active');
        $('.toggle-menu').removeClass('is-active');
        $('#toggle-menu').removeClass('toggle-close');
        open = false;
    }
    $('.toggle-menu').click(function(event) {
        event.stopPropagation();
        var toggle = open ? closeSidebar : openSidebar;
        toggle();
    });
    $(document).click(function(event) {
        if (!$(event.target).closest('.menu--slide-right').length) {
            closeSidebar();
        }
    });
});

<header class="navbar nav-main navbar-fixed-top" role="banner">
    <ul class="nav nav--right">
        <li class="v-button--slide-right" id="toggle-menu">
            <button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
                <span class="toggle"></span>
                <span class="menu">menu</span>
            </button>
        </li>
    </ul>
    <nav id="menu--slide-right" class="nav menu--slide-right">
        <ul class="main-menu">
            <li><a href="http://mpp.viabli.com/">Home</a></li>
            <ul aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
                <li class="panel">
                    <a aria-controls="dropdown-menu--resources" aria-expanded="false" data-target="#dropdown-menu--resources" data-parent="#accordion" data-toggle="collapse">Resources <span class="expand-icon fa fa-angle-down"></span></a>
                    <div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse" id="dropdown-menu--resources">
                        <ul class="v-dropdown-menu">
                            <li><a href="http://mpp.viabli.com/resources/blog/"><span class="link-icon fa fa-angle-right"></span> Blog</a></li>
                            <li><a href="http://mpp.viabli.com/resources/faq/"><span class="link-icon fa fa-angle-right"></span> FAQ</a></li>
                            <li><a href="http://mpp.viabli.com/resources/glossary/"><span class="link-icon fa fa-angle-right"></span> Glossary</a></li>
                            <li><a href="http://mpp.viabli.com/resources/shipping-info/"><span class="link-icon fa fa-angle-right"></span> Shipping info</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- end panel-group -->
            <li><a href="http://mpp.viabli.com/capabilities/">Capabilities</a></li>
            <li><a href="http://mpp.viabli.com/contact/">Contact</a></li>
        </ul>
    </nav>
</header>

使用in和collapse类

var openSidebar = function(){
    ...
    $('#dropdown-menu--resources').addClass('in');
    open = true;
}
var closeSidebar = function(){
    ...
    $('#dropdown-menu--resources').removeClass('collapse');
    open = false;
}

试试这个

增加了openSidebar中的$(".collapse").collapse('show');和closeSidebar中的$(".collapse").collapse('hide');。

var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
$(".collapse").collapse('show');
open = true;
}
var closeSidebar = function(){
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
$(".collapse").collapse('hide');
open = false;
}