Нажмите на LI, показать/скрыть UL

Question

Я пытаюсь сделать навигацию, но я не могу понять, что случилось с моим кодом. Это довольно грязно, поскольку я использую CMS, который создал идентификатор и класс, используемые в меню списка. В идеале у меня было бы лучшее имя для списка.

Я разместил код на 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, чтобы он вообще ничего не делал. Во-вторых, удаление атрибута href из a элементов делает их неактивными. Если вы хотите остановить действие ссылки, которое следует за кликом, вам нужно использовать preventDefault() на поднятом событии. Наконец, ваш обход DOM неверен. Вам необходимо использовать closest('li').find(), так как parent()a является 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(): Переключает (скрыть если показано, и наоборот) ul, который находится в текущем m enu, то есть подменю ul

$(this).closest('ul').siblings('.section').find('ul').slideUp(): Это скрывает все остальные открытые подменю.