jQuery slideToggle 多个面板答案

【问题标题】：jQuery slideToggle more than one paneljQuery slideToggle 多个面板
【发布时间】：2014-01-10 04:05:21
【问题描述】：

在 JavaScript 和 jQuery 方面，我完全是个菜鸟，但我们开始吧。

我想制作一个幻灯片切换，当我按“切换”时显示 3 张幻灯片、3 个“滑雪板技巧”。

当我按下切换时，现在只显示一个“技巧”，其余的从一开始就已经存在。

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script> 
$(document).ready(function()
    {
        $("#flip").click(function()
    {
        $("#panel,#panel2,#panel3").slideToggle("slow");
    });
    });
</script>

<style type="text/css"> 
#panel,#panel2,#panel3,#flip
    {
        padding:1px;
        text-align:left;
        color:white;
        background-color:black;
        border:solid 1px yellow;
    }
#panel
    {
        padding:5px;
        display:none;
    }
</style>
</head>
<body>

<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>

</body>
</html>

【问题讨论】：

标签： javascript jquery slidetoggle

【解决方案1】：

如果我理解正确，在页面加载时您只想显示“切换”。当您单击“切换”时，您希望显示其他三个部分。

为此，您需要将其他三个部分放在包装 div 内，然后在包装 div 上使用滑动切换。

快速 jsfiddle：http://jsfiddle.net/43byX/

这是您的代码的修改版本：

<html>
    <head>
        <script src="jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#toggle").click(function() {
                    $("#drawer").slideToggle("slow");
                });
            });
        </script>

        <style type="text/css">
             #toggle,
            .panel {
                padding:1px;
                text-align:left;
                color:white;
                background-color:black;
                border:solid 1px yellow;
            }

            #drawer {
                padding:5px;
                display:none;
            }
        </style>
     </head>
     <body>
        <div id="toggle">Toggle Me</div>
        <div id="drawer">
            <div class="panel">Switch back 1080 double cork</div>
            <div class="panel">Frontside triple cork 1440</div>
            <div class="panel">Ollie</div>
        </div>
     </body>
</html>

【讨论】：

非常感谢！这正是我所追求的。
@Glufse 没问题。如果此答案满足您的问题，请确保接受它是正确的。

【解决方案2】：

#panel, #panel2, #panel3
{
    padding:5px;
    display:none;
}

本质上，您只隐藏了 id 为面板的 div。但其他两个 div 是可见的。这些也需要隐藏。这样，当您切换所有三个时，它们的显示将变为 true。

顺便说一句，您创建自己的切换开关有什么原因吗？使用已经附带的 twitter bootstrap 可能会更快。 See This

【讨论】：

【解决方案3】：

如果我错了，请纠正我，但是使用手风琴似乎可以更轻松地完成您想要做的事情。

Quick jFiddle example here. Click the headers to see the effects.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
 $(function() {
    $( "#flip" ).accordion({
      collapsible: true,
        active: false
    });
 });
</script>
</head>

如果您希望其中一个窗格在页面加载时打开，您可以删除活动代码，如果您希望其中一个窗格始终保持打开状态，您可以删除可折叠线。

然后是html布局：

<div id="flip">
<h3>Switch back 1080 double cork</h3>
    <div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
    <div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
    <div><p>some text or whatevs here</p></div>
</div>