Question

我无法让bootstrap手风琴下拉链接在活动时保持蓝色。尝试过各种各样的事情，但都没有奏效。我究竟做错了什么？这是我的代码。

    <div class="visible-sm visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
              <h4 class="panel-title">
                Advertise Jobs
              </h4>
         </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
           <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h4 class="panel-title">
                 Source Talent 
                </h4>
            </a>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>


        </div>
      </div>
      <div class="panel panel-2">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Recruit Socially
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>

    </div>

JSfiddle demo

Answer 1

您需要将自定义类附加到切换面板。您可以使用jQuery。

执行此操作

首先，将此添加到您的JS：

jQuery('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('open-panel');
    $(this).parents('.panel-heading').addClass('open-panel');
});

这会将课程open-panel添加到活动面板。

其次，将此添加到您的css：

.open-panel h4 {
    background-color: #00aff0;
}

这会将bg颜色添加到点击的面板中。

第三，稍微更改你的html，以便在页面加载时蓝色bg会在那里。这可以通过手动将open-panel类添加到默认面板来完成。

改变这个：

<div class="panel-heading" role="tab">

对此：

<div class="panel-heading open-panel" role="tab">

如何激活我的下拉链接保持蓝色

1 个答案: