Question

我遇到了一个非常简单的任务问题..

我希望能够在两个内容面板之间切换，但只需一个按钮。我看过jqueryUI手风琴，但每个内容面板都有一个标题。我想要一种＆＃34;按钮＆＃34;在两个面板之间，两个面板充当切换并向两侧滑动，显示/隐藏整个内容，同时成为切换按钮。实际上我想要的是一个像http://i.stack.imgur.com/Tb2aV.png这样的切换按钮，但是＆＃34; ON＆＃34;和＆＃34; OFF＆＃34;部分是我的内容，＆＃34;按钮＆＃34;本身就是在这些之间切换的按钮。编辑：我在油漆中做了这个，告诉你我希望它如何表现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');
    });
});

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

此外，无论您想要在页面加载时打开哪个部分，只需手动添加课程open，以便section-2打开，而不是section-1写

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

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

1 个答案: