0

我找到了一些示例，您可以使用a选择器让多个 div 展开/折叠，但还没有看到在折叠时使用图标和展开时使用图标的示例。

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

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

});
4

5 回答 5

0

使用 slideToggle with$(this)而不是使用 with$(".slidingDiv")

$(document).ready(function(){
    $(".slidingDiv").hide();    
    $('.show_hide').click(function(){           
        $(this).slideToggle();
        var isShow = $(this).text() == 'Show';
        $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });    
});
于 2013-07-05T06:26:06.050 回答
0

检查这个，DEMO http://jsfiddle.net/yyene/FPGH4/

添加target属性以定位多个 div。

HTML

<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'});
    });
});
于 2013-07-05T08:38:01.220 回答
0 
  $(document).ready(function(){
 $(".show_hide").click(function(){
$("div").slideToggle();
 });
});

尝试这个

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

这是一个示例 jsfiddle，请参阅此

于 2013-07-05T06:36:59.463 回答
0

您要求一个复杂的解决方案，这里有一些提示：

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

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

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

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

前任：

<a class="show_hide group1">
<div class="slidingDiv group1"> div1 </div>
<div class="slidingDiv group1"> div2 </div>

...

$('.slidingDiv.group1').hide();

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

看：

于 2013-07-05T06:47:02.733 回答
0

您正在寻找的是手风琴。搜索“jQuery Accordion”，你会发现很多解决方案。

如果您想自己动手，这里有一个小想法可以帮助您：

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>

CSS：

.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; }

Javascript：

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

希望这可以帮助。

于 2013-07-05T07:21:08.490 回答