Javascript 手风琴的另一种方法

下面是一个场景：我正在修复一个有25-30页的站点，使用这种手风琴（）方法。这是我对手风琴的javascript方法，因为我一直在使用html结构，它被用于25-30页，我不想弄乱CSS。因此，我将在它上面放一个javascript，这样它就可以像手风琴一样工作

我的问题是：

单击标题时，标题与顶部不对齐，因此您必须向下滚动才能看到手风琴的内容。单击后，标题应自动在顶部对齐，以便内容在屏幕上可见

我在为类添加

if

条件时出错。它不能按我想要的方式工作。它应该为当前处于活动状态的头应用一个“enabled”类，其余的将有一个“disable”类

我将非常感谢任何帮助

多谢各位

[编辑]

以下是我为javascript所做的工作。

  <script type="text/javascript">

    $(document).ready(function(){
      $('.accordion .hdr:first').next().stop(false,true).slideDown(1000);
      $('.accordion .hdr:first').addClass('enable')
      $('.accordion .hdr').click(function(){
        $('.accordion .content').hide();
        $('.accordion .hdr').addClass('disable');
        $(this).next().stop(false,true).slideDown(1000);
        $(this).find(".aj_a").css({"background-position":"0 -43px","width":"20px","height":"15px","margin-right":"1px"}) 

         if($(this).hasClass('disable')) {
            $(this).addClass('enable');
         }
         else {
            $('.accordion .hdr').addClass('disable');
            $(this).addClass('enable');
          }

      });    
    });

  </script> 

  <ul class="accordion">
    <li>
      <div class="hdr">heading 1</div>
      <div class="content"><p><strong>Heading 1 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>


    <li>
      <div class="hdr">heading 2</div>
      <div class="content"><p><strong>Heading 2 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>

    <li>
      <div class="hdr">heading 3</div>
      <div class="content"><p><strong>Heading 3 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>


  </ul>

$（文档）.ready（函数（）{
$（'.accordion.hdr:first'）.next（）.stop（false，true）。slideDown（1000）；
$（'.accordion.hdr:first'）.addClass（'enable'））
$（'.accordion.hdr'）。单击（函数（）{
$（'.accordion.content'）.hide（）；
$（'.accordion.hdr'）.addClass（'disable'）；
$（this）.next（）.stop（false，true）.slideDown（1000）；
$（this.find（“.aj_a”）.css（{“背景位置”：“0-43px”，“宽度”：“20px”，“高度”：“15px”，“右边距”：“1px”}）
if（$（this）.hasClass（'disable'））{
$（this.addClass（'enable'）；
}
否则{
$（'.accordion.hdr'）.addClass（'disable'）；
$（this.addClass（'enable'）；
}
});    
});

这是html的结构。

  <script type="text/javascript">

    $(document).ready(function(){
      $('.accordion .hdr:first').next().stop(false,true).slideDown(1000);
      $('.accordion .hdr:first').addClass('enable')
      $('.accordion .hdr').click(function(){
        $('.accordion .content').hide();
        $('.accordion .hdr').addClass('disable');
        $(this).next().stop(false,true).slideDown(1000);
        $(this).find(".aj_a").css({"background-position":"0 -43px","width":"20px","height":"15px","margin-right":"1px"}) 

         if($(this).hasClass('disable')) {
            $(this).addClass('enable');
         }
         else {
            $('.accordion .hdr').addClass('disable');
            $(this).addClass('enable');
          }

      });    
    });

  </script> 

  <ul class="accordion">
    <li>
      <div class="hdr">heading 1</div>
      <div class="content"><p><strong>Heading 1 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>


    <li>
      <div class="hdr">heading 2</div>
      <div class="content"><p><strong>Heading 2 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>

    <li>
      <div class="hdr">heading 3</div>
      <div class="content"><p><strong>Heading 3 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.

Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.

Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
    </li>


  </ul>

标题1
标题1内容：Lorem ipsum door sit amet，Concetetur adipiscing Elite。阿利夸姆·佩伦茨克·霍恩卡斯·戴姆·索利西图丁·波尔塔（Aliquam pellentesque rhoncus diam sollicitudin porta）。阿利奎姆调味品是一种优质马萨酒。虎口浮雕和肘部浮雕同侧前庭；内克·莫里斯，一个秃鹫，一个老雷。Integer tincidunt，enim ac Temporal imperdiet，libero purus hendrerit risus，坐在amet tristique leo nisi的座位上。不要坐在阿梅特·埃利芬德·阿库。这是一只大白鼠。
无便利。猫前庭，前庭，前庭，前庭。毛里斯·法雷特拉（Mauris Phartra facilisis tellus dapibus ultricies）。不带头巾的吊带衫是一种特殊的装饰。Mauris sagittis Elite eu felis Comodo posuere。纳拉姆·维利特·利奥，波特提托·阿梅特·福西布斯坐在，莫利斯是一位普勒斯。梅塞纳葡萄因舌苔而危及孕妇或矢状体。
这是一个很好的例子。这是我们的猫，帕特·马蒂斯·尼西。卢克图斯是自由的尤伊斯莫·埃利芬德。阿利奎姆·韦尔里苏斯·森佩尔·拉奥里特。梅塞纳斯非维利特多洛。在odio eget urna faucibus调味品水平的前期准备。我不知道该怎么做。福斯·卢克图斯·泰卢斯和利奥·特里斯蒂克·库鲁斯在一起。暂时的，暂时的。这是一个世袭的欧盟临时政权，它的权力被剥夺了。自由的生活，自由的发酵，自由的饮食。乌尔特里斯、连续发酵液、发酵液和自由液。拉奥里特·库苏斯·马格纳坐在阿梅特·鲁特鲁姆的位子上。在pulvinar mauris auctor gravida的Mullis interdum nunc。这是一个非常重要的问题。在奥古斯·尼布（augue nibh），朗卡斯·埃吉特·康塞泰图（rhoncus eget Concertetur ac），波苏尔·内克·洛雷姆（posuere nec lorem）



标题2
品目2内容：Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。阿利夸姆·佩伦茨克·霍恩卡斯·戴姆·索利西图丁·波尔塔（Aliquam pellentesque rhoncus diam sollicitudin porta）。阿利奎姆调味品是一种优质马萨酒。虎口浮雕和肘部浮雕同侧前庭；内克·莫里斯，一个秃鹫，一个老雷。Integer tincidunt，enim ac Temporal imperdiet，libero purus hendrerit risus，坐在amet tristique leo nisi的座位上。不要坐在阿梅特·埃利芬德·阿库。这是一只大白鼠。
无便利。猫前庭，前庭，前庭，前庭。毛里斯·法雷特拉（Mauris Phartra facilisis tellus dapibus ultricies）。不带头巾的吊带衫是一种特殊的装饰。Mauris sagittis Elite eu felis Comodo posuere。纳拉姆·维利特·利奥，波特提托·阿梅特·福西布斯坐在，莫利斯是一位普勒斯。梅塞纳葡萄因舌苔而危及孕妇或矢状体。
这是一个很好的例子。这是我们的猫，帕特·马蒂斯·尼西。卢克图斯是自由的尤伊斯莫·埃利芬德。阿利奎姆·韦尔里苏斯·森佩尔·拉奥里特。梅塞纳斯非维利特多洛。在odio eget urna faucibus调味品水平的前期准备。我不知道该怎么做。福斯·卢克图斯·泰卢斯和利奥·特里斯蒂克·库鲁斯在一起。暂时的，暂时的。这是一个世袭的欧盟临时政权，它的权力被剥夺了。自由的生活，自由的发酵，自由的饮食。乌尔特里斯、连续发酵液、发酵液和自由液。拉奥里特·库苏斯·马格纳坐在阿梅特·鲁特鲁姆的位子上。在pulvinar mauris auctor gravida的Mullis interdum nunc。这是一个非常重要的问题。在奥古斯·尼布（augue nibh），朗卡斯·埃吉特·康塞泰图（rhoncus eget Concertetur ac），波苏尔·内克·洛雷姆（posuere nec lorem）



标题3
品目3内容：Lorem ipsum Door sit amet，Concetetur Adipsicing Elite。阿利夸姆·佩伦茨克·霍恩卡斯·戴姆·索利西图丁·波尔塔（Aliquam pellentesque rhoncus diam sollicitudin porta）。阿利奎姆调味品是一种优质马萨酒。虎口浮雕和肘部浮雕同侧前庭；内克·莫里斯，一个秃鹫，一个老雷。Integer tincidunt，enim ac Temporal imperdiet，libero purus hendrerit risus，sit amet tris