jQuery下拉問題

我有一個下拉菜單;當我點擊一個項目時，我想要顯示子菜單，如果在另一個菜單上單擊或模糊，則應通過刪除下拉類刪除上一個子菜單。但它不起作用。jQuery下拉問題

jQuery的

$('.menu_item > li ').click(function(){ 
    $('.menu_item .drop-down').removeClass(); 
    $(this).find('span').addClass('drop-down'); 
}); 

$('.menu_item .drop-down').blur(function(){ 
    $('.menu_item .drop-down').removeClass(); 
    return false; 
});

HTML

<nav id="menu_wrap" class="container"> 
    <a href="index.php" class="logo"></a> 
    <a href="#" id="select_menu" class="active" onclick="open_menu()">Menu</a> 
    <ul class="menu_item"> 
     <li><input type="text" placeholder="Search in here" class="search"></li> 
     <li><a href="#">Top Lists</a></li> 
     <li><a href="#">Shops</a></li> 
     <li><a href="#">Products</a> 
      <span> 
      <a href="#">Products</a> 
      <a href="#">Products</a> 
      <a href="#">Products</a> 
      <a href="#">Products</a> 
      </span> 
     </li> 
     <li><a href="Signup.php">Create Account</a></li> 
     <li><a href="Login.php">Log in</a></li> 
    </ul> 
</nav>

來源

2012-08-09 Soheil B.Marvasti

這裏可以使用http://jsfiddle.net/yxGGk/1/不是'span'元素不會觸發'blur'事件。 – undefined 2012-08-09 08:30:38

如果你點擊其他地方而不是點擊搜索欄，它將不會關閉子菜單 – 2012-08-09 08:33:22

我敢肯定，必須有這樣做一個乾淨的方式，但是這對你的作品描述

$(document).ready(function() { 

    $(document).click(function(e) { 
     var $target = $(e.target); 
     $('.menu_item .drop-down').removeClass(); 
     if ($target.parents().is('.menu_item > li')) { 
      $target.parent().find('span').addClass('drop-down'); 
      if ($target.parent().is('span')) { 
       $target.parent().addClass('drop-down'); 
      } 
     } 
    }); 

});

場景而fiddle的完整性

來源

2012-08-09 09:48:13

非常感謝你 – 2012-08-09 09:53:25

如果我得到你的權利，這可能是解決辦法：

$('.menu_item > li ').click(function(){ 
    $('ul.menu_item li span').removeClass('drop-down'); 
    $(this).find('span').addClass('drop-down'); 
}); 

$('.menu_item .drop-down').blur(function(){ 
    $('ul.menu_item li span').removeClass('drop-down'); 
    return false; 
});

這將刪除所有所有drop-down類span在您的menu_item類中。

如果您只需關閉以前的drop-down，則需要從$(this)開始，通過適當的選擇器進行選擇。

編輯：

現在我明白你在做什麼！您需要選擇要關閉下拉菜單（節，div）的所有元素，除了要添加drop-down類的元素（在您的案例中：$('.menu_item > li')）。對於這一點，添加另一個jQuery的點擊功能，並相應地改變選擇：

$('div').not('.menu_item li').click(function(){ 
     $('.menu_item .drop-down').removeClass('drop-down'); 
});

來源

2012-08-09 09:26:54 DonJuwe

仍然無法使用！當我在我的頁面的某個地方點擊時，不會刪除它 – 2012-08-09 09:40:14

試試這個

see demo

$('.menu_item li').click(function() { 
    $('.menu_item .drop-down').removeClass(); 
    $(this).find('span').addClass('drop-down'); 

}); 

$('.menu_item li').mouseleave(function() { 
    if ($(this).find('span').length > 0) { 
     $(this).find('span').removeClass('drop-down'); 
    } 
});

來源

2012-08-09 10:39:22 gaurang171

jQuery下拉問題

回答

相關問題