下拉菜單鏈接顯示/隱藏問題

當我單擊菜單項容器內的複選框時，不應出現下拉菜單。
當我在頁面中的任何位置點擊菜單外部時，應該隱藏下拉菜單。

這裏是我的jsfiddle：

流動的我的代碼。

HTML 
<div class="check_dropdown"> 
<input type="checkbox"> <a href="#" class="menu_item">Menu Item</a> 
<ul class="leads_menu"> 
    <li><a href="#">Sub Menu</a></li> 
    <li><a href="#">Sub Menu</a></li> 
    <li><a href="#">Sub Menu</a></li> 
    <li><a href="#">Sub Menu</a></li> 
</ul> 
</div> 

CSS 
.check_dropdown{ 
    background:#edecec; 
    padding:2px; 
    display:inline-block; 
    } 
.leads_menu { 
    display: none; 
    position:absolute; 
    color: #000; 
    cursor:pointer; 
    background:#edecec; 
} 

jQuery 
$(function() { 
    $(".check_dropdown").each(function() { 
     if ($(this).find(".menu_item").length > 0) { 
      $(this).mousedown(function() { 
       $(this).find(".leads_menu").stop(true, true).slideToggle(); 
      });   
     } 
    }); 
});

來源

2014-02-24 Awais Imran

我已經更新了你的小提琴（Click here）來檢查以下內容：

如果點擊的元素是那麼一個複選框防止在下拉菜單中的顯示出來。
單擊HTML網頁中的任意位置以觸發下拉框以隱藏。

的變化是在JS級別：http://jsfiddle.net/5FfgZ/3/

$(function() { 
    var menuClicked = false; //Check if user opened the dropdown 
    $(document).on('click', function(){ 
     if(menuClicked){ 
      menuClicked = false; 
      return; 
     } 
     if($(".leads_menu").css('display') != 'none'){ 
      $(".leads_menu").stop(true, true).slideToggle(); 
     } 
    }); 
    $(".check_dropdown").each(function(e) { 
     if ($(this).find(".menu_item").length > 0) { 
      $(this).mousedown(function(e) { 
       if($(e.target).attr('type') == 'checkbox') return; //Check if element clicked is a checkbox. 
       $(this).find(".leads_menu").stop(true, true).slideToggle(); 
       menuClicked = true; 
      });   
     } 

    }); 
});

來源

2014-02-24 08:54:29

這可能是你想要

$(document).click(function(){ 
$(".leads_menu").hide(); 
}); 

$(".menu_item").click(function(e){ 
    e.stopPropagation(); 
});

來源

2014-02-24 08:39:20 monu

我已經之外更新您的fiddle with a working solution

<ul class="check_dropdown"> 
    <li> 
     <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a> 
     <ul class="leads_menu"> 
      <li><a href="#">Sub Menu</a></li> 
      <li><a href="#">Sub Menu</a></li> 
      <li><a href="#">Sub Menu</a></li> 
      <li><a href="#">Sub Menu</a></li> 
     </ul> 
    </li> 
    <li> 
     <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a> 
     <ul class="leads_menu"> 
      <li><a href="#">Sub Menu</a></li> 
      <li><a href="#">Sub Menu</a></li> 
     </ul> 
    </li> 
</ul> 

$(function() { 
    $(".menu_item").click(function(e) { 
    $(this).siblings('.leads_menu').stop(true, true).slideToggle(); 
    e.preventDefault(); 
    }); 
});

來源

2014-02-24 08:44:18

你必須綁定一個事件到文件或窗口趕下點擊/鼠標按下下拉關閉它。 jQuery是讓你爲這個簡單的方法稱爲一個

$(window).one('mousedown', function() { ... });

我已經改變了你的提琴，讓你可以看看它。你也必須防止mousedown事件的傳播。否則它會轉到你的窗口對象並調用單綁定的方法。

http://jsfiddle.net/5FfgZ/2/

來源

2014-02-24 08:50:14

下拉菜單鏈接顯示/隱藏問題

回答

相關問題