11

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:

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

4

3 回答 3

1

如果您在那个小提琴中看到，他已经为

.active {
    background-color: Blue;   
}

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

于 2013-02-27T11:52:09.147 回答
0

这对我有用：

$('.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') 
  }
)
于 2013-02-27T11:52:27.257 回答
0

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 

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

于 2018-04-27T22:07:14.550 回答