Javascript 带有多个div和图标的JQuery切换

我发现了一些例子，其中可以使用

a

选择器来展开/折叠多个div，但没有看到一个在折叠时使用图标，另一个在展开时使用图标

如何调整以下内容，使其允许扩展和折叠多个div？ie：如果你打开一个，它不会打开所有其他的

<!-- HTML -->
<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

<!-- CSS -->
.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<!-- JS -->
$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

退房
.显示隐藏{
背景：url(http://img37.imageshack.us/img37/1127/plusminus.png)不重复；
左侧填充：20px；
}
$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（'.show_hide'）。单击（函数（）{
$（“.slidingDiv”）.slideToggle（）；
var isShow=$（this.text（）=='Show'；
$（this.text（isShow？'Hide'：'Show'）.css（{backgroundPosition:'0'+（isShow？-18:0）+'px'}）；
});
});

使用slideToggle与

$（此）

而不是使用

$（“.slidengdiv”）

试试这个

  http://jsfiddle.net/DRAJI/Q8tFh/4/

---

这是一个JSFIDLE示例，请参考此

您需要的复杂解决方案，以下是一些提示：

1-在隐藏/显示时使用不同的图标：

使用不同的类来显示和隐藏，而不是使用removeClass&addClass来更改“a”类。例：

$('a.group1').removeClass('hiding').addClass('showing');

2-要不隐藏/显示多个div，请使用第二个类对它们进行分组

例：

然后，您可以使用“a.group1”和“.slidingDiv.group1”来选择它们。。。 因此，slidingDiv可以决定如何隐藏，而group1决定应该隐藏/显示什么

见：

• 添加类：
• 删除类：
• 多类HTML：
• 多选择器jquery：
• 元素可见性jquery：

---

您要找的是手风琴。搜索“jqueryaccordion”，您将找到许多解决方案

如果你想自己动手，这里有一个小主意可以帮助你：

HTML：

<div id="container">
    <div class="header">H1</div>
    <div class="content">c1</div>
    <div class="header">H2</div>
    <div class="content">c2</div>
    <div class="header">H3</div>
    <div class="content">c3</div>
</div>

.container { height: 600px; width: 400px; }
.header { height: 32px; background: url(plus.png) no-repeat right center; }
.selectedHeader { background: url(minus.png) no-repeat right center !important; }
.content { height: 200px; }

$('#container').live("click", function (e) {
    var $item = $(e.target);
    if ($item.hasClass("header")) {
        $item.addClass("selectedHeader").siblings().removeClass("selectedHeader"));
        $content.not($item.next()).slideUp();
        $item.next().slideDown(UxSpeed);
    }
}

// this will hide all contents initially and show only the first one
$('.header').not($('.header').first()).next().hide();

Javascript：

<div id="container">
    <div class="header">H1</div>
    <div class="content">c1</div>
    <div class="header">H2</div>
    <div class="content">c2</div>
    <div class="header">H3</div>
    <div class="content">c3</div>
</div>

.container { height: 600px; width: 400px; }
.header { height: 32px; background: url(plus.png) no-repeat right center; }
.selectedHeader { background: url(minus.png) no-repeat right center !important; }
.content { height: 200px; }

$('#container').live("click", function (e) {
    var $item = $(e.target);
    if ($item.hasClass("header")) {
        $item.addClass("selectedHeader").siblings().removeClass("selectedHeader"));
        $content.not($item.next()).slideUp();
        $item.next().slideDown(UxSpeed);
    }
}

// this will hide all contents initially and show only the first one
$('.header').not($('.header').first()).next().hide();

希望这有帮助。

检查这一个，演示

将

target

属性添加到目标多个div

HTML

---

谢谢他们似乎每次单击都会隐藏？我从单击事件中删除了隐藏所有内容的语句，请检查更新的代码。嗯，这并没有回答问题。你所做的只是把它添加到一个提琴上并删除了一些代码（例如：图标改变位置）对不起，我不明白你的意思。我想这将是你期望的结果

$('#container').live("click", function (e) {
    var $item = $(e.target);
    if ($item.hasClass("header")) {
        $item.addClass("selectedHeader").siblings().removeClass("selectedHeader"));
        $content.not($item.next()).slideUp();
        $item.next().slideDown(UxSpeed);
    }
}

// this will hide all contents initially and show only the first one
$('.header').not($('.header').first()).next().hide();

<a class="show_hide" target="slidingDiv1">Show</a>
<div id="slidingDiv1" class="slidingDiv">
    Check out 1
</div>
<a class="show_hide" target="slidingDiv2">Show</a>
<div id="slidingDiv2" class="slidingDiv">
    Check out 2
</div>
<a class="show_hide" target="slidingDiv3">Show</a>
<div id="slidingDiv3" class="slidingDiv">
    Check out 3
</div>

$(document).ready(function(){ 
    $('.show_hide').on('click',function(){
        $('.show_hide').text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
        $(".slidingDiv").slideUp(100);
        $('#'+$(this).attr('target')).slideDown(300);
        var isShow = $(this).text() == 'Show';
        $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:10) +'px'});
    });
});