0

ここに次の簡単なデモがあります：https ：//tinker.io/8e585/1 。以下にコードを添付しました。

最初は、「テスト1」と「テスト2」の両方の内容が閉じられています。

ただし、クリックすると開きます。開いてクリックすると閉じるといいのですが。したがって、開いてクリックした場合=閉じる。これは可能ですか？

これを使って助けてくれてありがとう:-)

..

HTML

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes6');" style="color:#455560!important;">Test 1</a></h2>
    <div class="newboxes2" id="newboxes6">
        <p>bla 1</p>
    </div>
</div>

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes7');" style="color:#455560!important;">Test 2</a></h2>
    <div class="newboxes2" id="newboxes7">
        <p>bla 2</p>
    </div>
</div>

CSS

.newboxes2 {display:none}

jQuery

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               $(this).slideDown(200);
          }
          else {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               $(this).slideUp(600);
          }
     });
}
4

3 に答える 3

0

クラスを使用してそれを行うことができます。

https://tinker.io/8e585/12

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if (this.id == thechosenone) {
                if($(this).is('.active') )
                   $(this).removeClass('active').slideUp(600);
              else 
              $(this).addClass('active').slideDown(200);
          }
          else              
               $(this).removeClass('active').slideUp(600);

         if($(this).is('.active') )
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
         else
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
     });
}
于 2013-01-07T16:10:35.640 に答える
0

あなたが思うよりもすべてがずっと簡単なはずです。インラインjavascriptイベントハンドラーを削除する必要があります。そして、jquery-toggle-mechanismを使用します。

その場合、JavaScriptコードは次のように短くなる可能性があります。

$('.grid_4').bind('click', function () {
  $(this).find('.newboxes2').slideToggle(200);
});

例については、更新されたいじくり回しを参照してください：https ://tinker.io/8e585/4

slideDownをslideUp（600）よりも高速（200）にしたい場合は、現在の表示プロパティを検索できます。

var duration, $newboxes2;
$('.grid_4').bind('click', function () {
  $newboxes2 = $(this).find('.newboxes2');
  duration = $newboxes2.css('display') === 'none' ? 200 : 600;
  $(this).find('.newboxes2').slideToggle(duration);
});

ここで働いているいじくり回し：https ：//tinker.io/8e585/5

imageswapでコーディングします。このコードは1行または2行短くすることもできますが（if-else）、読みやすくするためにそのままにしておきます。

var duration, $newboxes2, imgSrc, imgBase = '/wp-content/themes/boilerplate/images/';

$('.grid_4').bind('click', function () {
  $newboxes2 = $(this).find('.newboxes2');
  if ($newboxes2.css('display') === 'none') {
    duration = 200;
    imgSrc = imgBase + 'image_corner_btn_onstate.png';
  } else {
    duration = 600;
    imgSrc = imgBase + 'image_corner_btn_offstate.png';
  }
  $(this).find('img.small').attr('src', imgSrc);
  $(this).find('.newboxes2').slideToggle(duration);
});

いじくり回しを参照してください：https ：//tinker.io/8e585/13

于 2013-01-07T16:18:08.120 に答える
0

アコーディオンが必要なようです：http：//jqueryui.com/accordion/または、以下のJavascriptを使用することもできます（HTMLにあるインラインJavascriptを削除し、「＃」を使用するだけです）。

(function($) {
$(function() {
  var links =  $('.grid_4 h2:first-child a');
  links.addClass('closed');
  links.click(function() {    
   var $this = $(this);

   links.each(function() {
     var curLink = $(this);
     if(curLink !== $this) {
       curLink.parents('.grid_4').find('.newboxes2').slideUp(600, function({curLink.addClass('closed');});
       curLink.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
        }
  });

    if($this.hasClass('closed')) {
        $this.parents('.grid_4').find('.newboxes2').slideDown(200, function() {$this.removeClass('closed');});
        $this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
    } else {
        $this.parents('.grid_4').find('.newboxes2').slideUp(600, function() {$this.addClass('closed');});
        $this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
    }

});
});
})(jQuery);
于 2013-01-07T17:10:54.590 に答える