Bootstrap 3手风琴开启/关闭造型

试图风格化bs3手风琴......我为标题和正文添加了一个图像。我设法在悬停和/或打开时设置关闭和蓝色文本的黑色标题文本。Bootstrap 3手风琴开启/关闭造型

如何更改悬停和/或打开时“面板标题”的背景颜色？我尝试了很多没有结果的事情。这是否会通过添加/删除样式成为jquery唯一的解决方案？

<div class="panel panel-faq"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2"> 
       1. Some title goes here 
      </a> 
     </h4> 
    </div> 
    <div id="accordion1_2" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       sample entry text goes here 
     </div> 
    </div> 
</div> 


.panel-faq{ 
    border-color: #dddddd; 
} 
.panel-faq .panel-heading { 
    color: #333333; 
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center; 
    padding-left: 45px; 
    border-color: #dddddd; 
} 

.panel-default > .panel-heading + .panel-collapse .panel-body { 
    border-top-color: #dddddd; 
} 

.panel-default > .panel-footer + .panel-collapse .panel-body { 
    border-bottom-color: #dddddd; 
} 

.panel-faq .panel-body { 
    background: url('/assets/img/faq-answer.png') no-repeat 40px 20px; 
    padding-left: 75px; 
} 

.panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{ 
    color:#428bca; 
    text-decoration:none; 
} 

.panel-faq .accordion-toggle.collapsed { 
    color:#333333; 
}

来源

2013-12-15 user756659

因为我无法做任何事在CSS中，只有我继续前进和一些jQuery。对于任何感兴趣的人，你可以添加/删除一个活跃的类到整个div然后申请样式。

$('.panel-faq').on('show.bs.collapse', function() { 
     $(this).addClass('active'); 
    }); 

    $('.panel-faq').on('hide.bs.collapse', function() { 
     $(this).removeClass('active'); 
    });

来源

2013-12-15 08:35:45 user756659

谢谢。我可以补充的是，如果你想在开始时打开一个，你需要手动将'collapse'类添加到该面板div标记的HTML中。 – Steve

谢谢 - 这是非常有用的 –

我有几个面板来管理，所以我修改了一下代码，最后得到：$（'。classofacordord.panel'）。on（'show.bs.collapse'，function （）{ $（this）.addClass（'active'）; }）; （'.classofacordord.panel'）。（'hide.bs.collapse'，function（）{ $（this）.removeClass（'active'）; }）; – madagalbiati

试试这个：

悬停效果：

.panel-faq .panel-heading:hover { 

    color: #333333;  
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;  
    padding-left: 45px;  
    border-color: #dddddd; 

}

如果后台没有得到重写，你也可以尝试：

background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center !important;

来源

2013-12-15 08:15:04

要做到这一点的AngularJS方式（没有JQuery），你可以在accordion-group上放置一个条件类。

<div accordion-group is-open="first.open" 
    ng-class="{'active': first.open}"> 
    <div accordion-heading>First Section</div> 
    <div>First content</div> 
</div> 


.active[accordion-group] .panel-heading { 
    background-color: black; 
    color: white; 
}

这种方式，active类被施加到整个accordion-group当它打开和panel-heading DIV（通过自举的UI生成的）可以与特定的CSS选择样式。

来源

2014-05-28 20:42:43

这里是CSS只有我想出了解决方案...

，因为如果用户点击太快的风格变得揭去jQuery的解决方案是不是很大。

只是针对你的头班时，它的不崩溃：

.panel-heading:not(.collapsed) { 
/*Your styles*/ 
}

的HTML我有：

<div class="collapsed panel-header" data-toggle="collapse" data-parent="panelParent" data-target="targetPanel">Header</div>

最后回答关于悬停的问题，它是那样简单：

.panel-heading:hover { 
/*Your styles*/ 
}

来源

2017-04-13 13:19:43 maxshuty

Bootstrap 3手风琴开启/关闭造型

回答

相关问题