Question

我尝试过这个解决方案：

Twitter bootstrap: adding a class to the open accordion title

但无济于事，有人能告诉我这里我做错了什么吗？

这是手风琴：

<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>

然后我的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>

我真的不太了解JS，所以感谢任何帮助！

Answer 1

如果你看到那个小提琴，他已经为

定义了一个css规则

.active {
    background-color: Blue;   
}

在您的情况下，您已成功将css类应用于元素，但未定义该类。（或者您还没有在问题中发布）

Answer 2

这对我有用：

$('.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') 
  }
)

Answer 3

要达到预期效果，请使用以下选项
1.将点击事件添加到 .accordion-toggle
1.使用class - accordion-toggle
从所有元素中删除活动类 2.检查aria-expanded标志，如果为true，则将active添加到单击的元素

    $(function() {
       $("a").on('click',function(){
         $('.accordion-toggle ').removeClass('active')

         if($(this).attr('aria-expanded')!== false){
             console.log('add');
                        $(this).addClass('active')
           }
        })
});

代码示例 - https://codepen.io/nagasai/pen/pVNxWw

添加'active'类来打开Bootstrap手风琴项目

3 个答案: