Форум

drakonolom · #1 (**permalink**) 03.07.2018, 11:12

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

В 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 · #2 (**permalink**) 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 · #3 (**permalink**) 03.07.2018, 12:16

$(this).parent().find('.toggle-target') .... $(this).nextAll('.toggle-target')
.... $(this).siblings('.toggle-target')

drakonolom · #4 (**permalink**) 04.07.2018, 15:35

Сообщение от laimas

$(this).parent().find('.toggle-target') .... $(this).nextAll('.toggle-target')
.... $(this).siblings('.toggle-target')

ни один из вариантов не работает.

Nexus · #5 (**permalink**) 04.07.2018, 15:56

drakonolom, а так?

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

laimas · #6 (**permalink**) 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 · #7 (**permalink**) 04.07.2018, 17:39

да, точно.

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

laimas · #8 (**permalink**) 04.07.2018, 17:57

Сообщение от drakonolom

да, точно.

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

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

Форум

Справочник

Discord чат

Курсы javascript