Как переключить только элемент заголовка, а не список

89
14

У меня есть эта функция, которая расширяет <ul> и скрывает ее после ее нажатия. Но когда я нажимаю <li>, она также закрывается или расширяется. Как заставить его переключаться только при нажатии кнопки <h4>?


$('.category ul').hide();

$('.sub').click(function() {
$(this).find('ul').slideToggle();
});


<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li>
<li class="posts"><a href="#">Adding new licence</a></li>
<li class="posts"><a href="#">Updating licence</a></li>
<li class="posts"><a href="#">Removing licence</a></li>
</ul>
</li>
</ul>

Спасибо заранее.

спросил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
1
Решение
87

Проблема: $('this'). find ('ul'). slideToggle();


'this' представляет объект obj, который выполняет функцию cals. В этом случае это h4. H4 имеет noe ul, поэтому вы не можете его найти. но вы можете найти ul на $('. sub')


Здесь приведен пример ann

$('.category ul').hide();

$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});

<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li>
<li class="posts"><a href="#">Adding new licence</a></li>
<li class="posts"><a href="#">Updating licence</a></li>
<li class="posts"><a href="#">Removing licence</a></li>
</ul>
</li>
</ul>


js скрипка:


https://jsfiddle.net/8hvc4cfh/

ответил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
44

Вы можете попробовать это.


$('li.sub h4').click(function() {
$(this).next().slideToggle();
});

ответил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
44

Сделано изменений


► изменен $('.sub').click(function() { на $('.sub h4')


► изменен $(this).find('ul') на $(this).next()

Рабочая демонстрация

 $('.category ul.archive_posts').hide();

$('.sub h4').click(function() {
$(this).next().slideToggle();
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a>
</li>
<li class="posts"><a href="#">Adding new licence</a>
</li>
<li class="posts"><a href="#">Updating licence</a>
</li>
<li class="posts"><a href="#">Removing licence</a>
</li>
</ul>
</li>
</ul>

ответил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
44

Измените привязку к h4, а затем скопируйте следующий ul.archive_posts.


$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});

Посмотрите, как это работает в этом скрипте JS: https://jsfiddle.net/rwvdf8ys/1/


Надеюсь, что это поможет.

ответил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
44

Вы можете использовать селектор siblings('ul') для поиска и закрытия соседнего ul. Пока $(".sub h4") ограничивает элементы, которые можно использовать для кликов, на ваш h4.


$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a>
</li>
<li class="posts"><a href="#">Adding new licence</a>
</li>
<li class="posts"><a href="#">Updating licence</a>
</li>
<li class="posts"><a href="#">Removing licence</a>
</li>
</ul>
</li>
</ul>

ответил(а) 2021-01-28T01:28:36+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема