Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   не работает вторая кнопка slideToggle (https://javascript.ru/forum/jquery/74341-ne-rabotaet-vtoraya-knopka-slidetoggle.html)

drakonolom 03.07.2018 11:12
не работает вторая кнопка slideToggle
 
Всем привет! Возникла такая проблемка в проэкте:

В html есть два дива : 

<div class="details-toggle">
                        <strong class="toggle-trigger">View Details</strong><br/>
                        <div class="toggle-target" style="display: none">
                            <ul>
<li>Lorem</li>
                             </ul>
                        </div>
                    </div>


в разных местах документа, но при помощи кода который написан ниже методом слайдТогл разворачивается только первый toggle-target, второй же не реагирует вообще никак. Грешу на селектор что я написал, а вы что думаете?

$('.toggle-trigger').click(function () {
$(this).parent().find('.toggle-target').slideToggle(300);
});

j0hnik 03.07.2018 11:34 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	
	<div class="details-toggle">
		<strong class="toggle-trigger">View Details</strong><br/>
		<div class="toggle-target" style="display: none">
			<ul>
				<li>Lorem</li>
			</ul>
		</div>
	</div>

	<div class="details-toggle">
		<strong class="toggle-trigger">View Details</strong><br/>
		<div class="toggle-target" style="display: none">
			<ul>
				<li>Lorem</li>
			</ul>
		</div>
	</div>



</select>
<script>

$('.toggle-trigger').click(function () {
$(this).parent().find('.toggle-target').slideToggle(300);
});


</script>
</body>
</html>


таки работает

laimas 03.07.2018 12:16
$(this).parent().find('.toggle-target') .... $(this).nextAll('.toggle-target')
.... $(this).siblings('.toggle-target')

drakonolom 04.07.2018 15:35
Цитата:
Сообщение от laimas (Сообщение 488867)
$(this).parent().find('.toggle-target') .... $(this).nextAll('.toggle-target')
.... $(this).siblings('.toggle-target')
ни один из вариантов не работает.

Nexus 04.07.2018 15:56
drakonolom, а так?
$('.toggle-trigger').click(function() {
    $(this).closest('.details-toggle').find('.toggle-target').slideToggle(300);
});

laimas 04.07.2018 17:24
Цитата:
Сообщение от drakonolom
ни один из вариантов не работает
Точно?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
     
    <div class="details-toggle">
        <strong class="toggle-trigger">View Details</strong><br/>
        <div class="toggle-target" style="display: none">
            <ul>
                <li>Lorem</li>
            </ul>
        </div>
    </div>
 
    <div class="details-toggle">
        <strong class="toggle-trigger">View Details</strong><br/>
        <div class="toggle-target" style="display: none">
            <ul>
                <li>Lorem</li>
            </ul>
        </div>
    </div>
 
 
 
</select>
<script>
 
$('.toggle-trigger').click(function () {
$(this).nextAll('.toggle-target').slideToggle(300);
});
 
 
</script>
</body>
</html>

drakonolom 04.07.2018 17:39
да, точно.

Всем спасибо за ответы, дело в том что прикрепленный script к хэду имел итрибут async а я писал этот кусок кода вне document.ready, так что он воспринимал его не очень хорошо

laimas 04.07.2018 17:57
Цитата:
Сообщение от drakonolom
да, точно.
Щелкнуть "Посмотреть" и убедится, что все работает, ибо $(this).nextAll('.toggle-target') - найти среди следующих узлов узел с классом toggle-target, а $(this).siblings('.toggle-target') - найти среди узлов братьев узел с классом toggle-target.

А то что у вас баги в коде так это не вина методов.


Часовой пояс GMT +3, время: 15:30.