Как выбрать только первый элемент после класса?

У меня есть выпадающее меню. Я хочу, чтобы он был динамическим, поэтому я могу только сообщить li (в nav), что это выпадающий список, а затем дать ему список, который является выпадающим содержимым. Проблема в том, что когда вы нажимаете на ссылку с классом .dropdown, она показывает все элементы с классом .dropdown-content. Любая идея умного селектора, который будет работать здесь?Как выбрать только первый элемент после класса?

Мой HTML:

<li><a class="dropdown" href="#">Gallery</a> 
     <ul class="dropdown-content"> 
      <li><a href="#">Photos on me</a></li> 
      <li><a href="#">Photos of me</a></li> 
      <li><a href="#">Photos with me</a></li> 
     </ul> 
    </li> 
    <li><a class="dropdown" href="#">Blog</a> 
     <ul class="dropdown-content"> 
      <li><a href="#">Photos on me</a></li> 
      <li><a href="#">Photos of me</a></li> 
      <li><a href="#">Photos with me</a></li> 
     </ul> 
    </li>

Мои ЯШ:

var main = function() { 
    $('.dropdown').click(function(){ 
     $('.dropdown + .dropdown-content').toggle(200); 
    }); 
}

источник

2016-01-28 Emric Månsson

Получить элемент, на котором произошло событие, нажмите, и из этого найти класс братьев и сестер, которые вы ищете.

$('.dropdown').click(function(){ 
    $(this).siblings('.dropdown-content').toggle(200); 
});

ИЛИ

$('.dropdown').click(function(){ 
    $(this).next().toggle(200); 
});

Working Fiddle

источник

2016-01-28 11:15:34

Просто включите data и id к коду. Это решит вашу проблему.

JS Bin на jsbin.com

(function() { 
 
    $('.dropdown').click(function(e){ 
 
     var id = $(this).data('toggle'); 
 
     $('#' + id).toggle(); 
 
    }); 
 
}());

.dropdown-content { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <ul> 
 
    <li><a class="dropdown" href="#" data-toggle="first">Gallery</a> 
 
     <ul class="dropdown-content" id="first"> 
 
      <li><a href="#">Photos on me</a></li> 
 
      <li><a href="#">Photos of me</a></li> 
 
      <li><a href="#">Photos with me</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a class="dropdown" href="#" data-toggle="second">Blog</a> 
 
     <ul class="dropdown-content" id="second"> 
 
      <li><a href="#">Photos on me</a></li> 
 
      <li><a href="#">Photos of me</a></li> 
 
      <li><a href="#">Photos with me</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</body> 
 
</html>

источник

2016-01-28 11:40:53 Gopikrishnan

Как выбрать только первый элемент после класса?

ответ

Смежные вопросы