手风琴的另一种方法

Question

所以这里是这种情况：我正在使用这种手风琴方法（http://jsbin.com/uqosap/6）修复一个有25-30页的网站。这是我手风琴的javascript方法，因为我被用于25-30页的html结构卡住，我不想混乱CSS。相反，我只是把一个JavaScript放在它的顶部，所以它的功能就像手风琴一样。

我的问题：

1. 当头部被点击它并不顶端对齐，那么你就必须向下滚动，所以你可以看到手风琴的内容。点击后，标题应该自动对齐，以便内容在屏幕上可见。

2. 我搞砸了，添加我的if条件的类。它不以我想要的方式运作。它应该为当前活动的标题应用一个“启用”类，其余的将有一个“禁用”类。

我很乐意得到任何帮助。

谢谢。

[编辑]

这里就是我做了的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> 

和这对HTML的结构。

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

Answer 1

1. 对于滚动我宁愿jQuery插件scrollTo。然后将回调function() { $.scrollTo($(this)); }作为第二个参数添加到.slideDown(1000)。
2. 在.addClass('enable')之前加上.removeClass('disable')。

另请参阅您的updated code。