0

jquery トグルを使用して、特定の製品の機能を表示および非表示にしようとしています。私はそれを機能させていますが、それは完璧ではなく、誰か助けてもらえないだろうか?

基本的に私が問題を抱えているのは、マスターを使用してすべてを開き、個々のアイテムをすべて閉じると、マスタースイッチを元に戻してすべてのテキストを表示する必要があることです。

さらに、各項目に + と - のアイコンを付けたいのですが、クリックした画像だけを置き換える方法がわかりません。リスト内のすべての項目ではありません。

どんな助けでも大歓迎です、ありがとう。

脚本

$(document).ready(function() {
    $('.toggle').hide();
    $('.toggler').click(function() {
        var target = this.id + '_content';
        var imgtarget = this.id + '_expand';
        $('#' + target).slideToggle();
        $('.toggleall').text('Hide all');
        $('<img src="images/collapse.gif">').prependTo('.toggleall');
    });

    $('.toggleall').click(function() {
        if ($('.toggle').is(':visible')) {
            $('.toggle').slideUp();
            $('.toggleall').text('Show all');
            $('<img src="images/expand.gif">').prependTo('.toggleall');
        } else {
            $('.toggle').slideDown();
            $('.toggleall').text('Hide all');
            $('<img src="images/collapse.gif">').prependTo('.toggleall');
        }
    });
});

HTML

<div class="toggleall"><img src="images/expand.gif">Show all</div>
        <br><br>
        <div class="toggler" id="toggle1"><img src="images/expand.gif" class="toggle1_expand">Toggle 1</div>
        <div class="toggle" id="toggle1_content">only toggle1</div>
        <div class="toggler" id="toggle2"><img src="images/expand.gif" class="toggle2_expand">Toggle 2</div>
        <div class="toggle" id="toggle2_content">only toggle2</div>
        <div class="toggler" id="toggle3"><img src="images/expand.gif" class="toggle3_expand">Toggle 3</div>
        <div class="toggle" id="toggle3_content">only toggle3</div>

これがコードの jfiddle です (François Wahl に感謝): jsfiddle.net/GUYfG

4

2 に答える 2

0

これが適切な形式の作業バージョンです:-

$(document).ready(function() {

   $('.toggle').hide();

   $('.toggler').click( function() {
      var target = this.id + '_content';
      var imgtarget = this.id + '_expand';
          $('#' + target).slideToggle(function(){
                if( $('.toggle').is(':visible') ) {
                  $('.toggleall').text('Hide all');
                  $('<img src="images/collapse.gif">').prependTo('.toggleall');
              } else {
                  $('.toggleall').text('Show all');
                  $('<img src="images/expand.gif">').prependTo('.toggleall');
              }
          });

          if( $('.toggle').is(':visible') ) {
              $('.toggleall').text('Hide all');
          }
    });

    $('.toggleall').click(function() {
         if ($('.toggle').is(':visible')) {
                $('.toggle').slideUp();
                $('.toggleall').text('Show all');
                $('<img src="images/expand.gif">').prependTo('.toggleall');
            } else {
                $('.toggle').slideDown();
                $('.toggleall').text('Hide all');
                $('<img src="images/collapse.gif">').prependTo('.toggleall');
            }
     });

 });

編集：

ここにフィドルがあります

コードチェックを編集しました。フィドルもチェックしてください。

于 2012-06-20T13:04:45.910 に答える
0

展開と折りたたみを行うには、DIV 内で異なる背景画像を持つクラスを切り替えるか、順序付けられていないリスト (UL / LI) を使用できます。

于 2012-06-20T12:55:17.340 に答える