Question

我想打开一个例如“1”（1.html）的链接，之后它应该显示（切换）网站1的所有子元素（1-1,1-2，...）。我在谷歌做了一个研究，当然也在stackoverflow。

我只发现了一个类似于使用wordpress的人的问题，这几乎符合我的意愿，但我不是像你们这样的专家：http://premium.wpmudev.org/forums/topic/jquery-toggle-and-allow-default

<div class="col col-md-3">
<nav id="#mobile-nav" class="nav clearfix" role="navigation">
    <ul class="nav" id="menu-flag-menu">
        <li><a href="index.html">Startseite</a></li>
        <li><a href="1.html">1</a>
            <ul>
                <li><a href="1-1.html">1-1</a></li>
                <li><a href="1-2.html">1-2</a></li>
                <li><a href="1-3.html">1-3</a></li>         
            </ul>
        </li>   
        <li><a href="2.html">2</a>
            <ul>
                <li><a href="2-1.html">2-1</a></li>
                <li><a href="2-2.html">2-2</a></li>
                <li><a href="2-3.html">2-3</a></li>
                <li><a href="2-4.html">2-4</a></li>
            </ul>
        </li>           
        <li><a href="#3">3</a>
            <ul>
                <li><a href="#3.1">3.1</a></li>
                <li><a href="#3.2">3.2</a></li>
            </ul>
        </li>
    </ul>
</nav>

我的jQuery切换功能：

$("#menu-flag-menu li a").click(function(){ 
// close all opened sub menus
$("#menu-flag-menu > li > ul > li > ul  > li > ul").slideUp();
// http://stackoverflow.com/questions/2534162/simple-jquery-toggle-of-children
var ul = $(this).next("ul");
if (ul.is(":hidden")) {
    ul.slideDown();
} 
else {
    ul.slideUp();
} });

我的CSS：

ul#menu-flag-menu > li > ul { display:none; }

我希望你能帮助我，谢谢！这是我的第一个问题，我没有双重发帖，在我问之前，我尝试使用我的大脑，谷歌和stackoverflow。：）

我想JSfiddle无法想象我的需求，但这里是： http://jsfiddle.net/tFh9w/1/

Answer 1

http://jsfiddle.net/tFh9w/8/

因为你使用静态HTML文件，除非你想让每个文件中的菜单不同（我希望你至少包括使用SSI的菜单），你需要JS来检测浏览器打开的页面，以及然后触发相关菜单项的打开。

首先，让我们轻松一点，将level1类添加到1级菜单元素中。

<li class="level1"><a href="1.html">1</a>
    <ul>
        <li><a href="1-1.html">1-1</a></li>
        <li><a href="1-2.html">1-2</a></li>
        <li><a href="1-3.html">1-3</a></li>         
    </ul>
</li>   
<li class="level1"><a href="2.html">2</a>
      etc etc

然后我们找到URL的最后一部分，并使用jquery查找href匹配它的锚点。然后我们检查它是父母还是孩子（只适用于两个级别，但可以适应更多）并打开正确的菜单项。

$(function(){
    var hrefs = $.trim(window.location.href).replace(/\/$/, "").split('/');
    var href = hrefs[hrefs.length -1];
    href = '1.html'; // we have to cheat in jsfiddle. remove this line in production
    // href = '1-1.html';
    $('#menu-flag-menu a[href="' + href + '"]').each(function(){
        // what are we opening - the child of this link or the parent?

        if ($(this).parent().hasClass('level1')) $ul = $(this).parent().children('ul');
        else $ul = $(this).closest('ul');

        $ul.slideDown();
    });

});

在示例中，我不得不作弊，因为在jsfiddle中，href始终是_display

jQuery切换允许父元素的默认href和父元素应该显示子元素（切换）

1 个答案: