Question

我有一个问题。单击时我需要在选项卡中添加一个类。我在下面解释我的代码。

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title accordionactive">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus"></i>
                Lorem ipsum1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <i class="more-less glyphicon glyphicon-plus"></i>
                Lorem ipsum2
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        </div>
    </div>
</div>

$(".panel-heading h4").click(function() {
       $(this).parent().addClass('accordionactive').siblings().removeClass('accordionactive');
 })

此处Lorem ipsum1最初由课程accordionactive突出显示。我需要用户点击Lorem ipsum2然后第一个Lorem ipsum1不会有课程{{1} }}和accordionactive标签将添加类Lorem ipsum2。请帮帮我。

Answer 1

您需要从h4元素中添加remove类，而不是其父div元素。你可以存储h4元素的对象来绑定click事件，并从所有h4元素中删除类添加点击处理程序中单击的h4元素：

var panelh4 = $(".panel-heading h4");
panelh4.click(function() {
   panelh4.removeClass('accordionactive');
   $(this).addClass('accordionactive') 
});

Answer 2

$(".panel-heading h4").bind('click',function() { 
      $(this).parent().addClass('accordionactive');
 });

Answer 3

$(".panel-heading").on("click","h4",function() {
    //do...
}

从class移除<h4>的任何内容。它仍然可以从其父母那里访问。

Delegation ......他们说。

Answer 4

如果您需要保存的选择元素，请尝试：

var selected = $(".panel-heading h4.accordionactive");

$(".panel-heading h4").on("click", function() {
   selected.removeClass('accordionactive');
   selected = $(this).addClass('accordionactive');
});

请参阅example

如果您需要逐个切换标签，请尝试：

$(".panel-heading h4").on("click", function() {
  $(this).toggleClass("accordionactive");
});

请参阅example

如果您想动态定义元素，请尝试：

   $(".panel-heading h4").on("click", function() {
      var current = $(this);
      current.closest(".panel-default")
        .parent()
        .find(".panel-heading h4.accordionactive")
        .removeClass('accordionactive');
      current.addClass("accordionactive");
    });

不推荐使用，但它有效！

请参阅example

<强>更新

仔细检查你的代码和一段灵性主义之后，我想要明白你想做什么。您正在使用bootstrap并且想要控制hidde / open进程。

您可以使用：

$(".panel-heading h4").on("click", function () {
    var current = $(this);
    current.toggleClass("accordionactive");
    if (current.hasClass("accordionactive")) {
        current.find("a .more-less.glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    } else {
        current.find("a .more-less.glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    }
});

full example

更正确的订阅引导事件shown.bs.collapse和hidden.bs.collapse 像这样：

$('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".panel-heading h4").addClass("accordionactive");
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".panel-heading h4").removeClass("accordionactive");
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

example

无法使用jquery和CSS

4 个答案: