javascript - 用按钮显示隐藏元素

Question

我有一排由三个按钮组成的，我需要这三个按钮保持在同一行。

话虽如此，我试图做到每次单击这些按钮之一时，隐藏的内容都会显示在它们下面。每个按钮都会显示与其他按钮不同的隐藏内容。

我是否可以使用 $(this) 完成这样的任务，或者我必须为每个按钮及其应该显示的相关内容分配一个唯一的 ID？

我尝试将每个按钮放在一个名为 .items 的父类(super class)中，并将该类中的相关内容作为子类，称为 .description - 这样我就可以访问它使用 jQuery 的 .children() 函数 - 但这往往会弄乱我的按钮所在的行(因此它们并不都在同一行)。有办法解决这个问题吗？

最简单的方法是什么？

编辑以显示代码:

<div class="displayers">
    <div class="items">
        <button type="button" class="btn btn-custom">Button 1</button>
        <div class="row">
            <div class="description">
                <p> content here </p>
            </div>
        </div>
    </div>
    <div class="items">
        <button type="button" class="btn btn-custom">Button 2</button>
        <div class="row">
            <div class="description">
                <p> content here </p>
            </div>
        </div>
    </div>
    <div class="items">
        <button type="button" class="btn btn-custom">Button 3</button>
        <div class="row">
            <div class="description">
                <p> content here </p>
            </div>
        </div>
    </div>
</div>

为了使按钮适契约(Contract)一行，我将“.items”类更改为具有“inline-block”属性。 “.description”类是隐藏的，我有一些 jQuery 来显示它。

var main = function() {
    $('.items').click(function() {
        $('.description').hide(); 

        $(this).children('.description').show();
    });
}; 

$(document).ready(main); 

问题是我的按钮不再位于同一行。

Answer 1

我喜欢使用 data 属性和 css 选择器(以后很容易更改)，所以我会使用:

$('[data-show]').on('click', function(e) {
    var toShow = $( $(this).data('show') );
    toShow.siblings().hide();
    toShow.show();
});

li {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <button data-show=".content > *:nth-child(1)">Open 1st</button>
    <button data-show=".content > *:nth-child(2)">Open 2nd</button>
    <button data-show=".content > *:nth-child(3)">Open 3rd</button></p> 
<ul class="content">
    <li>1st Container</li>
    <li>2nd Container</li>
    <li>3rd Container</li>
</ul>

对我来说看起来很简单，但并不意味着其他人会同意。这实际上取决于您的需求。