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

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

于 2012-06-20T12:55:17.340 回答
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 回答