手風琴的另一種方法

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。