Question

我的html中有以下手风琴：

<div id="AccordionTop">
 <div class="accordionTitle"><h1 style="font-size: 16px">Test Name:</h1></div>
 <div class="accordionContent">
     <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend ullamcorper tempus.</p>
 </div>
 <div class="accordionTitle"><h1 style="font-size: 16px">Test Name:</h1></div>
 <div class="accordionContent" style="border-color: #0a0a0a">
     <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend ullamcorper tempus.</p>
 </div>

我的文档就绪功能是：

$(document).ready(function() {

$('.accordionTitle').click(function() {

    $('.accordionTitle').removeClass('on');

    $('.accordionContent').slideUp('normal');

    if($(this).next().is(':hidden') == true) {

        $(this).addClass('on');

        $(this).next().slideDown('normal');
    }

});

}）;

当我打开其中一个手风琴时，另一个关闭，我希望它们保持打开直到我手动关闭它们。我怎样才能使它发挥作用？

Answer 1

你可以做这样的事情

    $(document).ready(function() {
      $('.accordionTitle').click(function() {

         $('.accordionTitle').removeClass('on');

         $(this).next().slideUp('normal');

         if($(this).next().is(':hidden') === true) {

           $(this).addClass('on');

           $(this).next().slideDown('normal');
         }
     });
   });

Demo

获得多个手风琴部分以保持开放状态

1 个答案: