Question

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

话虽如此，我试图这样做，以便每次点击其中一个按钮时，隐藏的内容会显示在它们下面。每个按钮都会显示与另一个不同的隐藏内容。

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

我尝试将每个按钮放在一个名为.items的超类中，并将此类中的相关内容作为一个名为.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>

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

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

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

$(document).ready(main);

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

Answer 1

我喜欢使用data属性和css选择器（以后容易更改），所以我会使用：

＆＃13;

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

＆＃13;

li {
    display: none;
}

＆＃13;

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

＆＃13;

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

Answer 2

您只需toggle button旁边的元素，只需class添加到每个元素，如下所示：

$('.btnshowdes').on('click',function(){
    $(this).next('.desc').toggle();
});

.desc{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
    <div class="internal">
        <input type="button" class="btnshowdes" value="Toggle Description"/>
        <div class="desc">Description 1</div>
    </div>
    <br/>
    <div class="internal">
        <input type="button" class="btnshowdes" value="Toggle Description"/>
        <div class="desc">Description 2</div>
    </div>
    <br/>
    <div class="internal">
        <input type="button" class="btnshowdes" value="Toggle Description"/>
        <div class="desc">Description 3</div>
    </div>
    <br/>
    <div class="internal">
        <input type="button" class="btnshowdes" value="Toggle Description"/>
        <div class="desc">Description 4</div>
    </div>
    <br/>
</div>

<强> FIDDLE DEMO

<强>更新

根据您更新的问题将其设置在同一行中，您只需为.items添加一个额外的样式，如下所示：

.items{
    display:inline-table; //helps to keep it in same row
    padding:10px;//Just to make it feel good

}

根据您的js结构， html 将是：

$('.btn-custom').on('click',function(){
    $(this).next('.row').find('.description').toggle();
});

<强> DEMO FIDDLE HERE

Answer 3

为了解决你的问题，我会拆分我的元素。为什么不将每个按钮放在不同的容器（例如div）中，每个容器都有自己的id和他自己的内容。

因此，当您单击某个按钮时，您将显示一个div内的内容，其他按钮的样式不会受到影响。

像

这样的东西

<div class="container" id="1">
    <button id="btn1"> Button one </button>
    <!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
    <button id="btn2"> Button two </button>
    <!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->

因此，您不必担心并使用复杂的脚本，并且每种样式都不会受到其他修改的影响。

用按钮显示隐藏的元素

3 个答案: