twitter-bootstrap 添加“活动”类以打开 Bootstrap 手风琴项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15111124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding 'active' class to open Bootstrap accordion item
提问by imcconnell
I have tried this solution:
我试过这个解决方案：
Twitter bootstrap: adding a class to the open accordion title
But to no avail, can someone tell me what I'm doing wrong here?
但无济于事，有人能告诉我我在这里做错了什么吗？
This is the accordion:
这是手风琴：
<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<div class="row-fluid">
<div class="span5">
<img src="img/smartlist/user-icon.png" class="user"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">Austin Wang</a>
</div>
<div class="span7">
<img class="envelope" src="img/smartlist/envelope.png"> <a href="#">Seller Drip</a>
<img class="new" src="img/smartlist/new-icon.png"> <a href="#">New</a>
<img class="messages" src="img/smartlist/bubbles.png"> <a href="#">8 Days</a>
<img class="accordion-action pull-right" src="img/smartlist/plus-box.png"
data-toggle="collapse" data-target="#collapseOne">
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12 top-links"> <a href="#" class="active">Email Template</a>
<a href="#">Home Price Evaluation Offer</a>
</div>
</div>
<div class="arrow-up"></div>
<div class="row-fluid grey-body">
<div class="span12">
<label>Subject</label>
<input type="text" class="text-field">
<label>Body</label>
<textarea rows="10"></textarea>
<div class="buttons">
<div class="form">
<button type="submit" class="send-button">Send</button> <a href="#" class="call">Call</a>
<a href="#" class="skip">Skip</a>
</div>
<div class="pull-right radio">
<input type="radio">
<label>BCC Me</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And then my JS at the bottom:
然后我的 JS 在底部：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
$(".collapse").collapse()
</script>
<script type="text/javascript">
$(function() {
$('.accordion-body').on('show', function (e) {
$(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
});
$('.accordion-body').on('hide', function (e) {
$(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
});
});
</script>
I really don't know much about JS, so any help is appreciated!
我真的不太了解 JS，所以任何帮助表示赞赏！
回答by Salman
If you see in that fiddle, he has defined one css rule for
如果你在那个小提琴中看到，他已经定义了一个 css 规则
.active {
background-color: Blue;
}
In your case, you are successfully applying the css class to the element, but the class is not defined. (Or you haven't posted it in the question)
在您的情况下，您已成功将 css 类应用于元素，但未定义该类。（或者你没有在问题中发布它）
回答by Andreyy
This works for me:
这对我有用：
$('.accordion-body').on('show',
function(e){
$(e.currentTarget).parent().find('.accordion-heading').addClass('active')
}
)
$('.accordion-body').on('hide',
function(e){
$(e.currentTarget).parent().find('.accordion-heading').removeClass('active')
}
)
回答by Naga Sai A
To achieve expected result, use below option
1. Add on click event to .accordion-toggle
1. Remove active class from all elements with class - accordion-toggle
2. Check aria-expanded flag, if it is true then add active to the clicked element
要达到预期的结果，请使用下面的选项
1。将点击事件添加到.accordion-toggle
1. 从所有元素中删除活动类 - 手风琴切换
2. 检查 aria-expanded 标志，如果为真，则将活动添加到单击的元素
$(function() {
$("a").on('click',function(){
$('.accordion-toggle ').removeClass('active')
if($(this).attr('aria-expanded')!== false){
console.log('add');
$(this).addClass('active')
}
})
});
code sample - https://codepen.io/nagasai/pen/pVNxWw
