Как переключить toggleClass?

219

22 декабря 2017, 00:51

Добрый день, есть функция 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

Answer 1

$('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>

Answer 2

Можете и без 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>