Добавление «активного» класса к самому переключателю jQuery

Question

Итак, у меня есть код jQuery, который я использую, чтобы заставить вкладки работать.

Теперь это моя проблема, я хочу, чтобы он переключился на класс, добавленный к нему, когда кто-то нажимает на переключатель. Я не хочу активный класс в контенте, но вместо этого переключается.

Вот мой JQuery код

function toggleMeMirror(a){ 

// hide all 

jQuery('.episodemirrors').hide(); 

// show one 

var e=document.getElementById(a); 

if(!e) return true; 

    if(e.style.display=="none"){ 

     e.style.display="inline" 

    } else { 

     e.style.display="none" 

    } 

return true; 

} 

Вот мой HTML код для переключения .. не содержание.

<div id="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >Toggle</div> 

Это где я хочу активный класс так, возможно, сделать класс active когда кто-то нажимает на него, так что я могу укладывать его по-разному.

Это мой HTML для моего содержания

<div id="post-<?php the_ID(); ?>" class="episodemirrors"> Content </div>

Answer 1

Вы можете использовать JQuery и у вас есть уникальный идентификатор Toggler. Таким образом, вы можете сделать это внутри существующей функции:

$('.post-[id]').addClass('active'); 

Некоторые предложения, хотя:

1. Поскольку ваши классы Toggler имеют уникальные идентификаторы, вы можете иметь их использовать идентификаторы вместо классов.

2. Вместо того, чтобы делать e.style.display, вы можете использовать toggleClass jQuery, который отслеживает добавление и удаление класса для вас. Вы начинаете с скрытия всех классов всякий раз, когда вы запускаете функцию, поэтому вы можете просто включить отображение для этого div.

3. Поскольку вы используете jQuery, вы можете использовать его для запуска щелчка.

Простой пример, основанный на коде:

<div class="trigger" id="[id]">Toggle</div> 

$('.trigger').click(function(){ 
    $('.episodemirrors').hide(); 
    var id = $(this).attr('id'); 
    $('#post-'+id).css('display', 'inline'); 
}); 

Answer 2

Я думаю, что самый простой способ это сделать это следующим образом:

HTML:

<div class="spoiler"> 
    <div class="toggle">Toggle</div> 
    <div class="content">Content</div> 
</div> 

CSS:

.spoiler .content { 
    display: none; 
} 

ЯШ:

$(".spoiler .toggle").click(function(){ 
    $(".spoiler .toggle.active").removeClass("active").next().hide(); 
    $(this).toggleClass("active"); 
    $(this).next().toggle(); 
})