jquery 内容面板之间带有按钮的滑块

Question

我在执行一项非常简单的任务时遇到了问题..

我希望能够在两个内容面板之间切换，但只有一个按钮。我看过 jqueryUI 手风琴，但每个内容面板都有一个 header。我想在两个面板之间有一种 "button"，它充当切换器并向每一侧滑动，showing/hiding 整个内容，同时成为 toggle-button。实际上我想要的是 toggle-button 这样的 http://i.stack.imgur.com/Tb2aV.png ，但是 "ON" 和 "OFF" 部分是我的内容，而 "button" 本身就是按钮在它们之间切换。编辑：我用油漆做了这个是为了向你展示我希望它如何表现 http://picload.org/image/cwllcdp/toggle.png

我不知道要搜索什么...您能快速推荐一个简单的方法吗？

谢谢

Answer 1

Here 是一个 JSFiddle，它可以大致完成您的要求。如果那是你真正想要的，你需要研究适当的滑动过渡，但除此之外，它工作得很好。另外它应该是相当跨浏览器的，因为它需要简单的 CSS 并且只需要 jQuery 的标准库。

HTML:

<div class="container">
    <div id="section-1" class="open">
        <p> Hi, Im section 1! Lorem ipsum dolor sit amet...</p>
    </div>
    <button id="btn">Toggle</button>
    <div id="section-2">
        <p>How are you? Im section 2! Lorem ipsum dolor sit amet...</p>
    </div>
</div>

CSS:

div.container {
    width: 100%;
    height: 100%;
}

div.container div {
    width: 300px;
    height: 250px;
    border: 1px solid black;
    padding: 0;
    display: none;
}

div.container div.open {
    height: 250px;
    display: block;
}

button {
    width: 300px;
    height: 40px;
    border: 1px solid black;
    padding: 0;
}

Javascript:

$(function() {
    $('button#btn').on('click', function() {
        $('div#section-1').toggleClass('open');
        $('div#section-2').toggleClass('open');
    });
});

这不是最漂亮的部分，但我只是为了最简单的解释。

此外，无论您想在页面加载时打开哪个部分，只需手动添加 class open，这样就可以打开 section-2 而不是 section-1 写入

<div id="section-2" class="open"></div>

jquery 内容面板之间带有按钮的滑块

jquery slider with button between the content panels

jquery

toggle

accordion

slide