jquery切換使用其父找到孩子UL錨點

我想切換我的菜單中使用jQuery的段。如果我綁定了<li>元素上的切換鍵，但我只要點擊<li>中的任何元素，元素就會消失，顯然是因爲切換。所以我嘗試添加切換事件到錨點沒有成功，請參閱下面的代碼。 Jquery處於最底層。謝謝jquery切換使用其父找到孩子UL錨點

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
     <header><link href="mobmenu.css" rel="stylesheet" type="text/css"/> 
     </header> 
     <div id="wrapper"> 
     <h1>Flyout Menu Demo - (Vertical Menu System) </h1> 
      <div id="main_navigation"> 
       <ul class="menu_level1"> 
        <li><a href="#">Home</a></li> 
        <li class="submenu1"><a class = "sb1" href="#">Products</a> 
         <ul class="menu_level2"> 
          <li class="submenu2"><a class = "sb2" href="#">Category 1</a> 
           <ul class="menu_level3"> 
           <li class="submenu"><a class = "sb3" href="#">Product 1</a> 
            <ul class="menu_level4"> 
            <li><a href="#">Product 1 Sub 1</a></li> 
            <li><a href="#">Product 1 Sub 2</a></li> 
            <li><a href="#">Product 1 Sub 3</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Product 2</a></li> 
           <li><a href="#">Product 3</a></li> 
           </ul> 
          </li> 
          <li class="submenu2"><a class = "sb2" href="#">Category 2</a> 
           <ul class="menu_level3"> 
           <li><a href="#">Product 1</a></li> 
           <li><a href="#">Product 2</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class="submenu1"><a class= "sb1" href="#">Services</a> 
         <ul class="menu_level2"> 
          <li><a href="#">Services 1</a></li> 
          <li><a href="#">Services 2</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Projects</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.sb1').bind('mousedown', openSubMenu1); 
       $('.sb2').bind('mousedown', openSubMenu2); 

       //$('.submenu2').bind('mousedown', openSubMenu); 

       function openSubMenu1() { $(this).parent.find('ul.menu_level2').toggle(); }; 
       function openSubMenu2() { $(this).parent.find('ul.menu_level3').toggle(); }; 

      }); 
     </script> 

    </body> 
</html>

來源

2012-07-13 davey

嘗試使用visible selector。我沒有測試過，但如果它不起作用，它應該是朝着正確的方向推進。

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.sb1').mousedown(function() { 
       var tmp = $(this).parent.find('ul.menu_level2'); 
       if ($(tmp).is(':visible')) { 
        tmp.hide(); 
       } else { 
        tmp.show(); 
       } 
      }); 
      $('.sb2').mousedown(function() { 
       var tmp = $(this).parent.find('ul.menu_level3'); 
       if ($(tmp).is(':visible')) { 
        tmp.hide(); 
       } else { 
        tmp.show(); 
       } 
      }); 
     }); 
    </script>

來源

2012-07-13 15:33:06 Jeremy

如果我使用的父（1）由於 – davey 2012-07-13 15:56:55

如果爲你工作，請不要忘記接受的答案這種方法也能發揮作用。很高興它有用 – Jeremy 2012-07-13 16:02:28

（1）在父母是什麼雖然通過:) – davey 2012-07-14 17:53:30

我想你會起來只有一個級別（與李工作，因爲它是一個水平，而在「A」的事件需要去2級以上），你需要獲得2級，以獲得ul。因此，請第二次使用.parent（），或者使用。父母（），這可以增加任意級別。

來源

2012-07-13 15:38:15 Th0rndike

謝謝你幫助我看到我的錯誤。問題是我沒有使用.parent（1）.find – davey 2012-07-13 15:56:25

如果我明白這個權利，問題是當你點擊裏面的元素，li事件被觸發？如果是這樣，如何將event.stopPropagation添加到li子元素？

像這樣的事情

$('ul li').children().on('mousedown', function(event){ 
    event.stopPropagation(); 
});

來源

2012-07-13 15:56:47 Zhivko

jquery切換使用其父找到孩子UL錨點

回答

相關問題