Question

我无法为多个文档制作1个大规模隐藏。这个showhide也必须能够包含其中的其他元素，例如 ol ul li 等。目前我在显示除标签之外的其他内容以及在其中添加另一个showhide时遇到问题。原创节目隐藏

同时显示包含内容的框。

HTML：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="showhideJQuery.js"></script>
</head>
<style>
.showhide {
    width:500px;
    height:200px;
    margin:1em .5em;
}
.showhide h3 {
    margin: 0;
    padding: .25em;
    background:#0033CC;
    border-top:1px solid #666666;
    border-bottom:1px solid #666666;
}
.showhide div {
    padding: .5em .25em;
}
</style>

<body>
<div class="showhide">
    <h3>Title 1</h3>
    <div>
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3>Another one?!</h3>
                <div>YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>
</html>

JQuery的

$(document).ready(function(){
$('div.showhide:eq(0)> div').hide();
$('div.showhide:eq(0)> h3').click(function() { 
    $(this).next().slideToggle('fast');                                            

});

}）;

Answer 1

我希望这就是你要找的东西。

正在使用 demo

$(function(){
    $('div.showhide > div').hide();
    $('div.showhide > h3').click(function() { 
        $(this).next().slideToggle('fast');                                        });
});

Answer 2

通过将类属性添加到要触发显示/隐藏的项目以及要显示/隐藏的元素，您可以执行以下操作：

HTML：

<body>
<div class="showhide">
    <h3 class="showhideclick">Title 1</h3>
    <div class="showhidecontainer">
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3 class="showhideclick">Another one?!</h3>
                <div class="showhidecontainer">YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>

JS：

$(document).ready(function(){
    $('.showhidecontainer').hide();
    $('.showhideclick').click(function() { 
        $(this).next('.showhidecontainer').slideToggle('fast');                                            
    });
});

这也使您可以灵活地使用不同的元素来包含隐藏的内容以及哪个元素触发操作。

希望这有帮助。

Answer 3

如果你摆脱了jquery选择器中的:eq(0)，它会按照你想要的那样做吗？

$(document).ready(function(){
$('div.showhide > div').hide();
$('div.showhide > h3').click(function() { 
    $(this).next().slideToggle('fast');                   
    }); 
});

JQuery Show Hide显示多个内容

3 个答案: