JQuery 显示隐藏显示多个内容

发布于 2024-12-03 05:53:09 字数 1391 浏览 4 评论 0原文

我在为多个文档制作 1 个批量展示时遇到问题。该 showhide 还必须能够在其中包含其他元素，例如 ol ul li 等。目前，我无法显示除标签之外的其他内容以及在其中添加另一个 showhide原始 show hide

还可以显示一个包含内容的框。

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');                                            

});

});

原文

Im having trouble making 1 mass showhide for multiple documents. This showhide must be able to contain other elements within it as well, such as ol ul li etc. Currently I'm having trouble showing the other content besides the tag as well as adding another showhide inside of the original show hide

Also to display a box with the content in it.

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');                                            

});

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜是你 2024-12-10 05:53:09

我希望这就是您正在寻找的。

工作演示

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

I hope this is what you are looking for.

Working demo

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

回复收藏 0 原文

烙印 2024-12-10 05:53:09

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

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');                                            
    });
});

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

希望这有帮助。

By adding class attributes to the item you want to trigger the show/hide and the element you want shown / hidden you can do something like this:

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');                                            
    });
});

This also gives you the flexibility to use different elements to contain your hidden content and which element triggers the action.

Hope this helps.

回复收藏 0 原文

淡笑忘祈一世凡恋 2024-12-10 05:53:09

如果您去掉 jquery 选择器中的 :eq(0) ，它会执行您想要的操作吗？

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

If you get rid of the :eq(0) in your jquery selectors, does it do what you want it to?

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

回复收藏 0 原文

~没有更多了~