0

サイトのコンテンツを表示および非表示にできるスクリプトのデモをここに持っています。それは完全に機能しています。

ただし、リンクをクリックしてコンテンツを表示し、もう一度クリックして非表示にすると、再び開きます。表示（「アクティブ」）ステータスでクリックすると完全に非表示にする必要があります。

誰でもこれを修正する方法を説明できますか?

 

ありがとうございました。

 

コード：

$(document).ready(function() {

 $('.showscroll').bind('click', 'h2, h3', function(e) {
   e.preventDefault();

   $(this).toggleClass('active');
   $('.newboxes2').slideUp().delay(200);
   $(this).find('.newboxes2').slideToggle();

               if($(this).is('.active') ) {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               } else {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               }
   if (this.id === 'service29') {
    $('html, body').animate({
      scrollTop: $(this).find('h2').offset().top
    }, 1000);
                }

 });

});
4

2 に答える 2

4

のみを呼び出すと、適切に切り替わります.slideToggle。呼び出し.slideUpごとに、表示されているときに上にスライドし、すぐに下にスライドします。これは、再び切り替えられるためです。.slideUp最初は見えないので滑り落ちます。

.not他のすべての要素を非表示にする場合は、現在「表示されている」要素を除外するために使用できます。

http://jsfiddle.net/fS5gq/3/

于 2013-01-30T06:45:06.133 に答える
1

この削除を試してください$('.newboxes2').slideUp().delay(200);

 $(document).ready(function() {

 $('.showscroll').bind('click', 'h2, h3', function(e) {
   e.preventDefault();

   $(this).toggleClass('active');       
   $(this).find('.newboxes2').slideToggle();

               if($(this).is('.active') ) {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               } else {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               }
   if (this.id === 'service29') {
    $('html, body').animate({
      scrollTop: $(this).find('h2').offset().top
    }, 1000);
                }

 });

});

http://jsfiddle.net/fS5gq/4/

于 2013-01-30T06:52:21.963 に答える