Question

我正在尝试使用jquery切换来显示和隐藏特定产品的功能。我有它工作，但它不完美，并想知道是否有人可以帮忙吗？

基本上我遇到的问题是当你使用master打开all然后自己关闭所有单独的项目时，我需要主开关恢复显示所有文本。

另外我想在每个项目上都有一个+和 - 图标但是无法弄清楚如何只替换点击的图像而不是列表中的所有图像！

非常感谢任何帮助，谢谢。

脚本

$(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çoisWahl）：jsfiddle.net/GUYfG

Answer 1

要展开 - 折叠，您可以在DIV内切换具有不同背景图像的类，或使用无序列表（UL / LI）。

Answer 2

这是适当格式的工作版本： -

$(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

我现在编辑了代码检查。还要检查小提琴。

jquery用主开关切换

2 个答案: