0

Добрый день, есть функция toggleClass которая аттачит и снимает класс по нажатию, у меня два дропдауна, что-то запутался, подскажите как правильно снять или убрать тагл по клику на спан, те клик по спану откылось одно меню клик по этому же спану закрывает меню, если меню открыто и клик по другому спану текущее меню закрываетс открывается то по которому был сделан клик.

$('span').click(function() {
  $(this).closest('.parent').not(this).removeClass('active')
  $(this).closest('.parent').toggleClass('active');
});
.active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

jsfiddle

8
  • @Air пробел забыли тут .active.dropdown, а мою правку отклонили почему-то ( 20 дек 2017 в 8:05
  • @МаксимСтепанов, Во-первых, когда я отклонял твою правку? Во-вторых, почему там должен быть пробел? В третьих, знай, если в примере есть синтаксическая ошибка или любая другая, ее нельзя править, потому что пример должен быть таким каким его оформил автор!!!!
    – Air
    20 дек 2017 в 8:17
  • @Air насчет отклонения - сорр, не разобрался. Насчет пробела - должен быть потому, что изначально был, а в Вашей правке его нет и код не работает. И нечего так кипятиться, я хотел помочь а не ткнуть носом кого-то. 20 дек 2017 в 8:23
  • @МаксимСтепанов, Макс, можно без "сорр"))) я люблю критику, она помогает быть лучше... А во-вторых я копировал, я щас конечно гляну, но не мог ее изменить
    – Air
    20 дек 2017 в 8:31
  • @МаксимСтепанов, ты прав, она была, но это не моя вина, я нажал кнопку править и видать она и убрала пробел...
    – Air
    20 дек 2017 в 8:32

2 ответа 2

3

$('span').click(function() {  
  $(this).closest('.parent').siblings().find('.dropdown').removeClass('active');  
  $(this).next().toggleClass('active');  // $(this).closest('.parent').find('.dropdown').toggleClass('active');
});
.active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

класс должен аттачиться к parrent а не к dropdown так как от parent идет наследование для спана

Значит так:

$('span').click(function() {  
  $(this).closest('.parent').toggleClass('active').siblings().removeClass('active');        
});
.active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}

.active .dropdown {
  color: blue;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

но parent могут быть вовсе не сосединми, раскиданы по всей странице в разных местах,

$('span').click(function(e) {  
  e.stopPropagation();  
  let myParent = $(this).closest('.parent');
  
  $('.parent').not(myParent).removeClass('active'); 
  myParent.toggleClass('active');        
});
.active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}

.active .dropdown {
  color: blue;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

<div>
  <span>
    <div class='parent'>
      <span>Третий</span>
      <div class="dropdown">Content</div>
    </div>
  </span>
</div>    

<ul>
  <li>test
    <div>
      <div class='parent active'>
        <span>Четвертый</span>
        <div class="dropdown">Content</div>
      </div>
    </div>
  </li>
  <li>test2</li>  
</ul>

8
  • Не, класс должен аттачиться к parrent а не к dropdown так как от parent идет наследование для спана 20 дек 2017 в 8:53
  • Наверное дальше я сам 20 дек 2017 в 8:55
  • Судя по всему так сделать нельзя, попробую другим способом 20 дек 2017 в 8:55
  • @AntonEssential просто я увидел .active.dropdown - и сделал вывод. 20 дек 2017 в 8:57
  • 1
    @AntonEssential короч, надо было точнее формулировать вопрос) 20 дек 2017 в 9:08
1

Можете и без toggleClass

$('span').click(function() {

if( $(this).parent().hasClass('active')){
 $(this).next('.dropdown').hide().parent().removeClass('active');
return false;
}

        $('.dropdown').hide().parent().removeClass('active');
        $(this).next('.dropdown').show().parent().addClass('active');
});
.active .dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

4
  • Не, класс должен аттачиться к parrent а не к dropdown так как от parent идет наследование для спана 20 дек 2017 в 8:44
  • Прошу прощения не туда коментнул 20 дек 2017 в 8:45
  • Понятно, ну реализация не совсем та которую хотел, но пока пусть будет так. 20 дек 2017 в 9:28
  • @AntonEssential в данном ответе кое-чего не хватает. например вот на такой структуре jsfiddle.net/e7c5wLLw - третий элемент не откроется/закроется 20 дек 2017 в 9:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.