Question

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

Answer 1

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

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>

Read more about accordion here.

编辑：放置

可能更好

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

就在关闭body标签之前而不是在标头中。最好的做法是将它放在一个单独的文件中并将其链接在标题中。

Answer 2

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

你实质上只隐藏id为panel的div。但另外两个div是可见的。那些也需要隐藏。这样，当您切换所有三个时，它们的显示将变为true。

旁注是否有理由创建自己的切换？使用已经附带的twitter bootstrap可能会更快。 See This

Answer 3

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

为此，您要将其他三个部分放在包装器div中，然后在包装器div上使用幻灯片切换。

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

Answer 4

我想，你想逐个切换那个隐藏的元素。好吧，如果我没错，那么这里是代码：

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

工作jsfiddle：http://jsfiddle.net/ashishanexpert/jg2wg/

jQuery slideToggle多个面板

4 个答案: