Question

我需要jQuery脚本：

默认情况下只显示一个活动div，其他人将隐藏
当前只有一个活跃（如果点击新隐藏的div - ＆gt;它打开并且当前打开的div将关闭）

我有一些代码和演示：

HTML

<div class="toggle">Content</div>
<div  class="hidden hide">Content</div>
<div class="toggle">Content</div>
<div  class="hidden show">Content</div>

CSS

.toggle {width:398px; height:48px; cursor: pointer; border: 1px solid #000}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}

.hide {display:none;}
.show {display:block;}

的JavaScript

$(document).ready(function() {
    $(".toggle").click(function() {
       $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
       $(this).toggleClass('active').next().slideToggle("fast");
    });
});

http://jsfiddle.net/kolxoznik1/C7W2D/

问题是当打开新的时，它没有正确关闭先前打开的div。

Answer 1

使用此代码

$(document).ready(function() {
    $(".toggle").click(function() {
         $(".hidden").hide(); //to hide all
        $(this).next().show(); //to show the one you clicked on

    });
});

在此处查看http://jsfiddle.net/C7W2D/4/

Answer 2

解决此问题的另一种方法是使用jQuery Accordion插件。您可以使用更具语义敏感性的标记，以更少的Javascript实现相同的效果。

重组标记（h3为可点击块，div为内容，段落元素使动画变得不稳定）：

<div id="accordion">
    <h3><a href="#">Header</a></h3>
    <div><p>Content</p></div>
    <h3><a href="#">Header</a></h3>
    <div><p>Content</p></div>
    <h3><a href="#">Header</a></h3>
    <div><p>Content</p></div>
    <h3><a href="#">Header</a></h3>
    <div><p>Content</p></div>
</div>

Javascript，包含jQuery UI：

$(document).ready(function() {    
    $("#accordion").accordion();
});

此处示例： http://jsfiddle.net/C7W2D/7/

还有许多选项，包括您提到的点击崩溃功能：

$("#accordion").accordion({collapsible: true});

Answer 3

这应该可以解决问题。

它使您能够单独显示和隐藏每个div与上面隐藏先前打开的div的片段。

$(document).ready(function() {
    $(".toggle").click(function() {
       $().next('.hidden').slideToggle(300);
       $(this).next().slideToggle("fast");
    });
});

此处示例：http://jsfiddle.net/C7W2D/9/

Answer 4

试试这个：

$(document).ready(function() {
    $(".toggle").click(function() {
       var x= $(this).next();
       if(x.is(":visible")){
            x.hide();
       }else{
           $(".hidden").hide(); //to hide all
           x.show(); //to show the one you clicked on
       }
    });
});

在JsFiddle ...

显示/隐藏jQuery脚本不会正确切换元素

4 个答案: