单击链接后禁用菜单隐藏

Question

I have a dropdown menu, but I can get li s to stay visible after clicking. What I want is li s to hide when I click outside of the menu or on the ul :

I tried using return false; and event.stopPropagation(); but I can't get it to work - I hope someones knows how to solve this - I think it should be fairly simple.

Here's my code:

<link rel="stylesheet" href="css/4style.css" type="text/css" media="screen">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<ul id="nav">
    <li >
        <a href="#">Topic 1</a>
        <ul class="show">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>

    <li >
        <a href="#">Topic 2</a>
        <ul class="show">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>   
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $(document).ready(function(){

    $('#nav li a').click(function () { // binding onclick
        if ($(this).hasClass('select_ul')) {

            $("#nav li ul").slideUp(100); // hiding submenu
            $("#nav .select_ul").removeClass("select_ul");
        } else {

            $("#nav li ul").slideUp(100); // hiding submenu
            $("#nav .select_ul").removeClass("select_ul");

            if ($(this).next(".show").length) {
                $(this).addClass("select_ul"); // display popup
                $(this).next(".show").slideDown(200);     
            }
        }
    });

    $('#nav li ul li a').click(function() {
        $("#nav li ul li a.select_li").removeClass("select_li");
        $(this).addClass('select_li');
    });

    // SKJUL NAV VED KLIK UDENFOR
    $('html').click(function() {
        $("#nav").hide(100); 
    });

    $('#nav').click(function(event){
    event.stopPropagation();
});

}); //END OF DOCUMENT READY
</script>

Answer 1

Try this,

$(document).ready(function () {
    $('ul#nav > li > a').click(function () { // onclick for parent anchor tags
        $("#nav li ul").hide(); // hiding submenu
        $("#nav .select_ul").removeClass("select_ul");

        if ($(this).next(".show").length) {
            $(this).addClass("select_ul"); // display popup
            $(this).next(".show").slideDown(200);
        }
    });
    $('#nav li ul li a').click(function (e) {
        e.preventDefault();
    });
    // SKJUL NAV VED KLIK UDENFOR
    $('html').click(function () {
        $("#nav").hide(100);
    });
});

Demo 1

Updated, yes it is because of $('html').click() comment or remove this event will solve this issue like

 $('html').click(function () {
       // $("#nav").hide(100);
 });

Demo 2

Answer 2

I decided to strip things back a little, because you wanted to slideDown() and slideUp() , I chose to check the visibility, but otherwise I'd of used jQuery's toggle() .

$('#nav li').on('click', function( e ) {

    e.stopPropagation();

    /**
     *    $Menu
     *        - get the child list of the
     *          currently clicked Menu.
     *
     *    $thisMenu 
     *        - Transvrse up the tree to find
     *          the User's Click, of <li>
     *          or <a> parent list container.
     *
     *     $activeMenus
     *        - Get Menus other than the current
     *          list clicked.
    **/
    var $Menu = $(this).children('ul.show'),
        $thisMenu = $(e.target).closest('.show'),
        $activeMenus = $('#nav li').not(this).find('ul.show');

    /**
     *  Only If the Clicked menu isn't visible
    **/
    if ( !$Menu.is(':visible') ) {

      /**
       *  If this menu here, doesn't the Class 'Active'
       *  Slide up other Active menus.
      **/
      if ( !$thisMenu.hasClass('active') )
           $activeMenus.slideUp().removeClass('active');

        /**
         *  Give this menu a new Class of Active
         *  Adding Purple background && Slide it down.
        **/
        $Menu.slideDown().addClass('active');        
    } 
});

Indeed you were correct to use event.stopPropagation() ; called right after the on click event.

Fiddle : http://jsfiddle.net/axKjT/2/

Answer 3

kindly consider the following example:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<ul id="nav">
<li class="nav2"><a href="#">Approved</a>
    <ul>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-251</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-252</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-253</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-254</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-255</a></li>
    </ul>
</li>

<script type="text/javascript"> 
$(document).ready( function() {

 // Hide all subfolders at startup
 $("#nav").find("UL").hide();

// Expand/collapse on click
 $(".nav2 A").click( function() {
    $(this).parent().find("UL:first").slideToggle("medium");
    if( $(this).parent().attr('className') == "nav2" ) return false;
 });

 });
</script>