Javascript 带有主开关的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');
        }
    });
});

$（文档）.ready（函数（）{
$（'.toggle'）.hide（）；
$（'.toggler'）。单击（函数（）{
var target=this.id+“_content”；
var imgtarget=this.id+'u expand'；
$（'#'+target）.slideToggle（）；
$（'.toggall'）.text（'Hide all'）；
$（''）.prependTo（'.toggall'）；
});
$（'.toggall'）。单击（函数（）{
如果（$（'.toggle'）。是（':visible'））{
$（'.toggle'）.slideUp（）；
$（'.toggleall'）.text（'Show all'）；
$（''）.prependTo（'.toggall'）；
}否则{
$（'.toggle'）.slideDown（）；
$（'.toggall'）.text（'Hide all'）；
$（''）.prependTo（'.toggall'）；
}
});
});

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>

全部显示



切换1
仅切换1
切换2
仅切换2
切换3
仅切换3

---

下面是代码的要点（感谢François Wahl）：

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

以下是正确格式的工作版本：-

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

 });

$（文档）.ready（函数（）{
$（'.toggle'）.hide（）；
$（'.toggler'）。单击（函数（）{
var target=this.id+“_content”；
var imgtarget=this.id+'u expand'；
$（'#'+target）.slideToggle（函数（）{
如果（$（'.toggle'）。是（':visible'））{
$（'.toggall'）.text（'Hide all'）；
$（''）.prependTo（'.toggall'）；
}否则{
$（'.toggleall'）.text（'Show all'）；
$（''）.prependTo（'.toggall'）；
}
});
如果（$（'.toggle'）。是（':visible'））{
$（'.toggall'）.text（'Hide all'）；
}
});
$（'.toggall'）。单击（函数（）{
如果（$（'.toggle'）。是（':visible'））{
$（'.toggle'）.slideUp（）；
$（'.toggleall'）.text（'Show all'）；
$（''）.prependTo（'.toggall'）；
}否则{
$（'.toggle'）.slideDown（）；
$（'.toggall'）.text（'Hide all'）；
$（''）.prependTo（'.toggall'）；
}
});
});

编辑：

---

我现在已经编辑了代码检查。同时检查小提琴。

这不会影响功能，但您的图像标签没有关闭。

/>

。您的问题有点不清楚。您能解释一下吗，我们使用HTML5标记，所以他们不再需要它们了基本上我需要切换所有功能来响应所有的div被关闭，我需要在每个div上有一个图像来表示扩展或收缩content@Barlow1984：为了给这些家伙一些可以玩的东西，下面是当前代码的jsfiddle.net/GUYfG。请随意将其添加到您的帖子中。感谢您的帮助，老实说，这和我在发布之前尝试的差不多。我唯一的问题是，当你打开一个项目，然后单击主隐藏，它只切换它们，不隐藏所有现在你可以检查，希望你的要求现在得到满足。非常感谢你的这一次。它的效果要好得多，但在使用项目时，项目上的图像似乎没有变化，但我不明白为什么，它们保持为展开图像。此外，出于某种原因，“全部隐藏”似乎会删除图像，然后重新添加。是的，我对其进行了相应的编码，图像会发生变化，collaspe.gif应将图像标记为“隐藏”。和expand.gif应包含指示展开的图像。正如您之前对image所做的那样，代码是用来交换expand和collaspe映像的。也可以通过切换类使用另一种方法。如果你明白我想说的话，请告诉我。你的问题解决了吗。。？当我检查时，它在这里工作得很好。