JQuery显示隐藏显示多个内容_Jquery_Show Hide

JQuery显示隐藏显示多个内容

jquery

JQuery显示隐藏显示多个内容,jquery,show-hide,Jquery,Show Hide,我无法为多个文档制作1个大规模显示隐藏。此showhide还必须能够包含其他元素，例如ol ul li等。目前，我无法显示标签之外的其他内容，也无法在原始showhide中添加另一个showhide 也可以显示包含内容的框 HTML: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <s

我无法为多个文档制作1个大规模显示隐藏。此showhide还必须能够包含其他元素，例如ol ul li等。目前，我无法显示标签之外的其他内容，也无法在原始showhide中添加另一个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>

}))

我希望这就是你要找的

工作

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

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

HTML:

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

希望这能有所帮助。

如果你去掉jquery选择器中的

：eq（0）

，它会做你想要的吗

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

li

s必须包含在

ul

s或

ol

s中。我相信在你发表评论后我对帖子做了一些编辑，对不起。你的HTML仍然无效，你的

只是在

中浮动，它需要在列表项中。另外，我认为您的选择器

$（'div.showhide:eq（0）>div'）

将使用

.showhide

div选择所有

s，包括嵌套的show/hides演示程序运行良好。感谢您花了这么多时间，您知道如何在内容中添加背景色（框）吗？所谓内容，您是指正在滑动的div？您可以使用

css

method

$（“选择器”）.css（“backgroundColor”，“specifyColorHere”）设置背景色

感谢您为本期提供的所有帮助，尽管当您单击“动画”一词时，您在此处看到了这些帮助，但它试图出现，但没有……有什么想法吗？您缺少了

li

的

ol

标记。我修好了，看看这个提琴，谢谢你对这个问题的帮助，虽然你点击“动画”这个词时看到了，但是没有…有什么想法吗？我想这是因为我不能把另一个showhidecontainer放在另一个里面？我知道在你需要放置

之前，我已经用javascript完成了这项工作，这不是很酷吗

在一个

内，或让它工作。如果这个答案对你有帮助，也请接受。

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

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

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