从菜单栏打开Bootstrap手风琴面板

时间:2018-04-17 03:01:08

标签: javascript twitter-bootstrap accordion

我的菜单放在header.html中,将在所有页面中加载。

如果我点击index.html中的菜单,它将使用下面的js代码(位于product.html标记的末尾)打开product.html中相应的折叠面板。

但如果我点击product.html中的菜单,手风琴专家小组就不会回复。 我的代码有什么问题?

$(function(){

// check if there is a hash in the url
if ( window.location.hash != '' )
{
    // remove any accordion panels that are showing (they have a class of 'in')
    $('.collapse').removeClass('in');

    // show the panel based on the hash now:
    $(window.location.hash + '.collapse').collapse('show');
}

});

了header.html

<header>
<nav class="navbar navbar-default menu" role="navigation">
    <div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown">Products
                        <b class="caret"></b>
                    </a>
                    <div class="row">
                        <div class="col-md-6">
                            <div>
                                <ul>
                                    <li>
                                        <a href="product.html#collapse1">product A</a>
                                    </li>
                                    <li class="menu-li" wp-loop-skip>
                                        <a href="product.html#collapse2"> product B</a>
                                    </li>
                                    <li class="menu-li" wp-loop-skip>
                                        <a href="product.html#collapse3"> product C</a>
                                    </li>

                                </ul>
                            </div>
                        </div>

                    </div>
                </li>

            </ul>

        </div>
    </div>
</nav>

感谢。

0 个答案:

没有答案