jquery與主開關切換

我想使用jQuery切換來顯示和隱藏特定產品的功能。我有它的工作，但它不是完美的，想知道是否有人可以幫助嗎？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：jsfiddle.net/GUYfG

來源

2012-06-20 Barlow1984

這不影響功能，但沒有任何圖像標籤正在關閉'/>'。 – Nope

你的問題不太清楚，你能解釋更多 –

謝謝，我們使用HTML 5標記，所以他們不再需要它們 – Barlow1984

這裏是一個正確格式的工作版本： -

$(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'); 
      } 
    }); 

});

編輯：

Here is the fiddle

我現在編輯的代碼檢查。同時檢查小提琴。

來源

2012-06-20 13:04:45 Subhajit

謝謝你，這幾乎是我在發帖之前嘗試說實話。我唯一的問題是，當你打開一個項目，然後單擊主隱藏，它只切換它們，並不隱藏所有 – Barlow1984

啊，得到你的觀點，將它整理出來..給幾分鐘 – Subhajit

現在你可以檢查，希望你的要求現在滿足了。 – Subhajit

要展開 - 收起你可以切換一個在DIV中使用不同背景圖像的類，或者使用無序列表（UL/LI）。

來源

2012-06-20 12:55:17 Cranio

jquery與主開關切換

回答

相關問題