点击LI，显示/隐藏UL

Question

我想做一个切换导航，但我似乎无法弄清楚我的代码有什么问题。这很麻烦，因为我使用CMS创建了列表菜单中使用的id和class。理想情况下，我会有一个更好的名单名单。

我已经发布，如果我不想默认动作被禁用没有一个子菜单，家居等项目上有什么https://jsfiddle.net/chachacallis/amfmsors/1/

$(document).ready(function() { 
    $('ul ul').hide(); 
    $('ul li span.section_title a').removeAttr("href"); 
    $('ul li span.section_title > a').click(function (event) { 
     $('ul ul').hide('slow'); 
     $(this).parent().find('ul').toggle('slow'); 
    }); 
}); 

代码更新 ？如何将它添加到现有的代码？

Answer 1

首先，你的jsFiddle没有包含jQuery，所以它什么也没做。其次，从a元素中删除href属性会使其不可点击。如果您想停止点击后的链接操作，则需要在raise事件上使用preventDefault()。最后，你的DOM遍历是不正确的。您需要使用closest('li').find()，因为a的parent()是span，它不包含ul。把所有的行动中，你得到的东西是这样的：

$(document).ready(function() { 
    $('ul ul').hide(); 
    $('ul li span.section_title > a').click(function (e) { 
     e.preventDefault(); 
     $('ul ul').hide('slow'); 
     $(this).closest('li').find('ul').toggle('slow'); 
    }); 
}); 

Working fiddle

Answer 2

Demo

$(document).ready(function() { 
 
    $('.section').on('click', 'li a', function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('li').find('ul').slideToggle(); 
 
    $(this).closest('ul').siblings('.section').find('ul').slideUp(); 
 
    }); 
 
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<ul id="section_1" class="section active_section"> 
 
    <li><span class="section_title active_section_title" id="section_title_1"><a id="section_link_1" href="#">Home</a></span> 
 

 
    <ul style="display: none;"> 
 
     <li> 
 
     a 
 
     </li> 
 
     <li>b 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul id="section_4" class="section"> 
 
    <li><span class="section_title" id="section_title_4"><a id="section_link_4" href="#">About</a></span> 
 

 
    <ul style="display: none;"> 
 
     <li> 
 
     a 
 
     </li> 
 
     <li>b 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul id="section_2" class="section"> 
 
    <li><span class="section_title" id="section_title_2"><a id="section_link_2" href="#">Lines</a></span> 
 

 
    <ul style="display: none;"> 
 
     <li class="exhibit_title" id="exhibit_12"><a href="#">wellWE</a> 
 

 
     </li> 
 
     <li class="exhibit_title" id="exhibit_11"><a href="http://localhost/apparel/index.php/license/-marvel/">Arrival</a> 
 

 
     </li> 
 
     <li class="exhibit_title" id="exhibit_10"><a href="#">Star Home</a> 
 

 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul id="section_3" class="section"> 
 
    <li><span class="section_title" id="section_title_3"><a id="section_link_3" href="#">Private homeland</a></span> 
 

 
    <ul style="display: none;"> 
 
     <li class="exhibit_title" id="exhibit_13"><a href="#">ttW 15-16</a> 
 

 
     </li> 
 
     <li class="exhibit_title" id="exhibit_14"><a href="#">ghy15</a> 
 

 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul id="section_5" class="section"> 
 
    <li><span class="section_title" id="section_title_5"><a id="section_link_5" href="#">contact</a></span> 
 

 
    <ul style="display: none;"></ul> 
 
    </li> 
 
</ul>

$(this).closest('li').find('ul').slideToggle()：这将切换（隐藏，如果显示，反之亦然）在当前m中的ul enu即子菜单ul

$(this).closest('ul').siblings('.section').find('ul').slideUp()：隐藏所有其他打开的子菜单。