2016-04-09 48 views
0

我正在尝试创建手风琴效果。 我可以这样做,该部分扩大,但我不知道如何关闭已经打开的。jquery上的手风琴。我无法关闭活动元素

你能帮我一下吗?

function cws_accordion_init(){ 
    jQuery.fn.cws_accordion = function() { 
     jQuery(this).each(function(){ 
      var sections = jQuery(this).find(".accordion_section"); 
      sections.each(function (index, value){ 
       var section_index = index; 
       jQuery(this).find(".accordion_title").on("click", function(){ 
        jQuery(this).siblings(".accordion_content").slideDown("300"); 
        sections.eq(section_index).addClass("active"); 
        sections.eq(section_index).siblings().removeClass("active").find(".accordion_content").slideUp("300"); 
       }); 
      }); 
     }); 
    } 
} 

HTML

<section class='cws-widget'> 

    <section class='cws_widget_content toggle_widget'> 
     <div class='accordion_section featured_check_up'> 
      <div class='accordion_title'>title 1</div> 
      <div class='accordion_content' style='display: none;'> 
       <p>fhshjsjf isfi fhsuhsj dsihdisj dshd disd jdijd shd is disu</p> 
      </div> 
     </div> 

     <div class='accordion_section featured_check_up'> 
      <div class='accordion_title'>title 2</div> 
      <div class='accordion_content' style='display: none;'> 
       <p>djjdjdijisjdisjidjsijdisjdisjdis</p> 
      </div> 
     </div> 



    </section> 

</section> 
+0

精神作出的jsfiddle? –

回答

1

这将切换所选择的手风琴,并关闭所有其他:

$(".accordion_title").on("click", function(){ 
    $(this).siblings(".accordion_content").slideToggle("300"); 
    $(this).addClass("active"); 
    $(".accordion_title").not(this).removeClass("active"); 
    $(".accordion_title").not(this).siblings(".accordion_content").slideUp("300"); 
});