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>

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