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

Question

I would like to open a link for example "1" (1.html) and afterwards it should show (toggle) all child elements of the site 1 (1-1, 1-2,...). I did a research in google and of course also in stackoverflow.

I only found a similar issue of someone who uses wordpress, which it comes nearly to my wish, but I am not a expert like you guys: 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>

My jQuery toggle function:

$("#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();
} });

My CSS:

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

I hope you can help me, thanks! This is my first question, I don't double post and I try to used my brain, google and stackoverflow, before I ask. :)

I guess the JSfiddle would not help for imagine my demand, but here it is: http://jsfiddle.net/tFh9w/1/

Answer 1

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

Because you are using static HTML files, unless you want to make the menu different in each file (I hope you're at least including the menu using SSI), you need JS to detect what page the browser has opened, and to then trigger the opening of the relevant menu item.

First of all let's make it easy and add a level1 class to the level 1 menu elements.

<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

Then we find the last part of the URL, and use jquery to find the anchor who's href matches it. Then we check if it's a parent or child (only works for two levels, but can be adapted for more) and we open the correct menu item.

$(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();
    });

});

In the example I've had to cheat because in jsfiddle the href is always going to be _display