在jQuery的手风琴菜单中找到下一个兄弟

问题描述：

所以，我的问题是，我似乎无法找到下一个（）兄弟到下面的嵌套UL LI。当设置为隐藏时。我能找到它时，它不会被设置为隐藏容易：在jQuery的手风琴菜单中找到下一个兄弟

这工作，当我注释掉JS并没有什么隐藏。 //$(".vertNavigation李UL A“）隐藏（） ;
添加此处以点击功能： $（this）.next（）。css（“background”，“yellow”）。slideToggle（“normal”）;

目标是做相反的事，点击按钮ONE和slideDown嵌套ul等等。我在这里错过了什么？

HTML代码：

</head> 

<body> 
<div class = "vertNavigation"> 
    <ul> 
     <li><a href="#" id = "button One">BUTTON ONE</a> 
      <ul> 
       <li><a href="#">sub menu 1</a> 
       <li><a href="#">sub menu 2</a> 
       <li><a href="#">sub menu 3</a> 
       <li><a href="#">sub menu 4</a> 
      </ul> 
     </li> 
     <li><a href="#" id = "button Two">BUTTON TWO</a> 
      <ul> 
       <li><a href="#">sub menu 1</a> 
       <li><a href="#">sub menu 2</a> 
       <li><a href="#">sub menu 3</a> 
       <li><a href="#">sub menu 4</a> 
      </ul> 
     </li>  
     <li><a href="#" id = "button Two">BUTTON THREE</a> 
      <ul> 
       <li><a href="#">sub menu 1</a> 
       <li><a href="#">sub menu 2</a> 
       <li><a href="#">sub menu 3</a> 
       <li><a href="#">sub menu 4</a> 
      </ul>   
     </li>  
     <li><a href="#" id = "button Two">BUTTON FOUR</a> 
      <ul> 
       <li><a href="#">sub menu 1</a> 
       <li><a href="#">sub menu 2</a> 
       <li><a href="#">sub menu 3</a> 
       <li><a href="#">sub menu 4</a> 
      </ul>   
     </li>  
    </ul> 
</div> 

</body> 
</html>

CSS代码：

.vertNavigation ul { 
    list-style-type: none; 
    padding-left: 0; 
    margin-lef: 0; 
} 

.vertNavigation li { 
    display: inline; 
} 

.vertNavigation a { /*main menu*/ 
    display: block; 
    width: 100px; 
    text-decoration: none; 
    margin: 2px 0px 2px 0px; 
    padding: 6px 15px 3px 15px; 
    background-color: #EAEAEA; 
    color: #333; 

    font-size: .8em; 
} 

.vertNavigation li ul a { /*sub menu*/ 
    text-decoration: none; 
    border-bottom: solid 1px #333; 
    border-length: 50px; 
    margin: 2px 0px 2px 0px; 
    background-color: #FFF; 
    color: #333; 
}

JS代码：

google.load("jquery", "1.6.2"); 

google.setOnLoadCallback(function(){ 

    $(".vertNavigation li ul a").hide(); 
    $(".vertNavigation ul li a").click(function() 
    { 
     //$(this).next().slideToggle("normal"); 
     $(this).next().slideDown("normal"); 

     return false; 
    }); 

});

答

试试这个：

$(".vertNavigation > ul > li > ul").hide(); 
$(".vertNavigation > ul > li > a").click(function(e){ 
    e.preventDefault(); 
    $(this).next('ul').slideToggle(); 
});

Check the live working solution

Shef，谢谢！你回答了我的问题，但是preventDefault（）不允许我链接一个URL，对吗？ – milkIt

*（按意外返回）... *我喜欢你给我看的东西。您冒泡回注册点击，并且您还重新排列了我的hide（）目标。你可以告诉我是jQuery的新手。 – milkIt

@milkIt：手风琴本身将无法链接到某处，否则手风琴功能将无法正常工作，因为当您希望子ul显示时单击链接时，该链接会将您带到某个地方其他。使用更新后的代码100％确保子'ul'上的链接可以正常工作。 :) – Shef

在jQuery的手风琴菜单中找到下一个兄弟

相关推荐