Javascript jQuery滑动切换多个面板_Javascript_Jquery_Slidetoggle

Javascript jQuery滑动切换多个面板

javascript jquery

Javascript jQuery滑动切换多个面板,javascript,jquery,slidetoggle,Javascript,Jquery,Slidetoggle,说到JavaScript和jQuery，我是个十足的傻瓜，但我们开始吧我想做一个幻灯片切换，当我按下“切换”键时显示3张幻灯片，3个“滑雪板技巧” 因为现在当我按下toggle时只显示了一个“技巧”，其余的从一开始就已经存在了 <html> <head> <script src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function() {

说到JavaScript和jQuery，我是个十足的傻瓜，但我们开始吧

我想做一个幻灯片切换，当我按下“切换”键时显示3张幻灯片，3个“滑雪板技巧”

因为现在当我按下toggle时只显示了一个“技巧”，其余的从一开始就已经存在了

<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>


$（文档）.ready（函数（）
{
$（“#翻转”）。单击（函数（）
{
$（“#面板，#面板2，#面板3”）。滑动切换（“慢速”）；
});
});
#面板，#面板2，#面板3，#翻转
{
填充：1px；
文本对齐：左对齐；
颜色：白色；
背景色：黑色；
边框：实心1px黄色；
}
#面板
{
填充物：5px；
显示：无；
}
切换
切换回1080双软木塞
正面三重软木1440
奥利

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


$（函数（）{
$（“翻转”）手风琴({
可折叠的：是的，
活动：错误
});
});

如果希望加载页面时其中一个窗格处于打开状态，则可以删除活动代码；如果希望其中一个窗格始终保持打开状态，则可以删除可折叠行

然后是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>


切换回1080双软木塞
这里有些文字什么的
正面三重软木1440
这里有些文字什么的
奥利
这里有些文字什么的

编辑：最好将

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


$（函数（）{
$（“翻转”）手风琴({
可折叠的：是的，
活动：错误
});
});

就在结束正文标记之前，而不是在标题中。最佳做法是将其放在一个单独的文件中，并将其链接到标题中

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

实际上，您只隐藏id为panel的div。但其他两个div是可见的。这些也需要隐藏起来。这样，当您切换这三个选项时，它们的显示将变为true

请注意，您创建自己的切换有什么原因吗？使用twitter引导可能会更快，因为它已经随附了

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

要做到这一点，您需要将其他三个部分放置在包装器div中，然后在包装器div上使用滑动切换

快速JSFIDLE：

以下是您的代码的修改版本：

<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>


$（文档）.ready（函数（）{
$（“#切换”）。单击（函数（）{
$（“#抽屉”）。滑动切换（“慢”）；
});
});
#切换，
.小组{
填充：1px；
文本对齐：左对齐；
颜色：白色；
背景色：黑色；
边框：实心1px黄色；
}
#抽屉{
填充物：5px；
显示：无；
}
切换我
切换回1080双软木塞
正面三重软木1440
奥利

我认为，您需要逐个切换该隐藏元素。如果我没有错的话，下面是代码：

$("#flip").click(function(){
    var targets = $("#panel, #panel2, #panel3"),
        hiddenElm = targets.filter(":hidden");

    hiddenElm.slideDown();

    if(hiddenElm.next().length){
        hiddenElm.next().slideUp();
    } else {
        targets.first().slideUp();
    }
});

工作指南：

非常感谢！这正是我想要的。@Glufse没问题。如果这个答案满足了你的问题，请确认它是正确的。

$("#flip").click(function(){
    var targets = $("#panel, #panel2, #panel3"),
        hiddenElm = targets.filter(":hidden");

    hiddenElm.slideDown();

    if(hiddenElm.next().length){
        hiddenElm.next().slideUp();
    } else {
        targets.first().slideUp();
    }
});