點擊鏈接後禁用菜單隱藏

Question

我有一個下拉菜單，但我可以得到li s點擊後保持可見。 我要的是li s到隱藏當我點擊菜單以外的區域或在ul：

我嘗試使用return false;和event.stopPropagation();但我無法得到它的工作 - 我希望某人知道如何解決這個問題 - 我認爲這應該相當簡單。

這裏是我的代碼：

<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

試試這個，

$(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

更新，是的，它是因爲$（ 'HTML'）點擊（）。評論或刪除此event將解決此問題，如

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

Demo 2

Answer 2

我決定剝離回來的東西一點點，因爲你想slideDown()和slideUp()，我選擇來檢查的知名度，但在其他方面我的使用jQuery的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');   
    } 
}); 

你的確是正確的使用event.stopPropagation();在click事件後立即打電話。

小提琴：http://jsfiddle.net/axKjT/2/

Answer 3

笑納下面的例子：

<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>