jQuery Accordion没有关闭

时间:2015-03-04 11:30:59

标签: jquery accordion jquery-ui-accordion

如果我点击手风琴导航中的范围,手风琴标签不会关闭。我错过了什么?



$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .second-title').removeClass('active');
        $('.accordion .radio-toolbar').slideUp(300).removeClass('open');
}
 
    $('.second-title').click(function(e) {
        var currentAttrValue = $(this).attr('href');
 
        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
 
        e.preventDefault();
    });
});

.radio-toolbar {
  width: 100%;
  height: 100%;
  float: left;
  background: #444; 
  -webkit-box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  display:none;
  padding-bottom: 20px;
}

.accordion {
  float: left;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}
.second-title {
  font-weight: 400;
  color: #444;
  float: left;
  width: 100%;
  height: 100%;
  display: block;
  padding: 24px;
  box-sizing: border-box;
  line-height: 20px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
}

.strong  {
  font-weight: 600;
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">

    
    
    
<a class="second-title" href="#getlogo">
<span class="strong">Logoanbringung</span>
</a>                      
         
<div class="radio-toolbar" id="getlogo">
</div>

    
    

<a class="second-title" href="#getmechanik">
<span class="strong">2-Ring Combimechanik</span>
</a>  
  
<div class="radio-toolbar" id="getmechanik">  
</div>


  
</div>
&#13;
&#13;
&#13;

  

Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam   nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

1 个答案:

答案 0 :(得分:0)

使用$(this)代替e.target

$(document).ready(function(e) {
    function close_accordion_section() {
        $('.accordion .second-title').removeClass('active');
        $('.accordion .swatch, .accordion .radio-toolbar').slideUp(300).removeClass('open');
}

    $('.second-title').click(function() {
        var currentAttrValue = $(this).attr('href');

        if($(this).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});