Question

好的，所以我有一些jQuery代码，我用来获得标签。

现在这是我的问题，我希望自己切换到有人点击切换时添加"active"类。我不想在内容上使用活动类，而是要切换。

这是我的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并且您拥有唯一的转发器ID。因此，您可以在现有功能中执行此操作：

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

但有些建议：

由于您的toggler类具有唯一ID，因此您可能希望让它们使用ID而不是类。
您可以使用jQuery的toggleClass来跟踪为您添加和删除类，而不是使用e.style.display。每当触发该函数时，您都会隐藏所有类，因此您只需打开该div的显示。
由于您使用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;
}

JS：

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

将“active”类添加到切换本身jQuery中

2 个答案: