Question

所以我想要完成的是我正在使用Wordpress建立一个网站。我有一个菜单，其中一个项目是“产品”我有4项产品，电子产品，汽车，家居用品等。在这个例子中，我专注于电子产品。所以在电子产品下我有另一个子菜单。所以这是第3级，看起来像下面的代码。

<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
    <li class="dropdown-submenu menu-electronics"><a href="http://mywebsites/product_type/electronics/">Electronics</a>
<ul class="dropdown-menu">
        <li class="menu-tv"><a href="/product_type/electronics/#collapse414">Tvs</a></li>
        <li class="menu-phones"><a href="/product_type/electronics/#collapse416">Phone</a></li>
        <li class="menu-games"><a href="/product_type/electronics/#collapse418">Games</a></li>
        <li class="menu-other"><a href="/product_type/electronics/#collapse420">Other</a></li>
    </ul>
</li>

现在，当我点击第3级的任何链接时，它会转到父页面并为该ID打开手风琴。所以我设置了它，它的工作原理。然而我遇到的问题是因为所有这些项目示例（电视，电话，游戏，其他）在技术上都在同一页面上。当我点击其中一个链接，然后返回菜单时，第3级中的所有链接都处于活动状态。因此，如果我点击其他项目，则网址会更改，但页面不会刷新，也不会打开新的目标手风琴。以下是我到目前为止这个领域的情况。我假设我必须在这个脚本中添加一些东西来检查每次点击一个链接？

<script type="text/javascript">
(function( $ ) {
    $(document).ready(function() {
        var anchor = window.location.hash.replace("#", "");
        $(".collapse").collapse('hide');
        $("#" + anchor).collapse('show');
    });
})( jQuery );
</script>

尝试设置一个JSfiddle来显示这个但却失败了。

Bootstrap手风琴目标链接保持活跃

0 个答案: