gpt4 book ai didi

javascript - 在父级之外切换 Javascript

转载 作者:行者123 更新时间:2023-11-28 09:33:56 25 4
gpt4 key购买 nike

尝试使用父容器外部的元素放置事件来切换 div 时遇到问题。

我尝试使用 span 标记从父元素外部实现相同的行为。

如有任何帮助,我们将不胜感激。

HTML:

<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>

<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>



<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>

Javascript:

$('.toggler').live('click',function(){
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action

});

最佳答案

修改了您的示例以适应目的。

<div id="container">
<div>
<div>
<span class='open'>Open</span>
<span class='close' style='display:none;'>Close</span>
</div>

<div class='content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='close'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggle">Gain Early Access</span>
</div>

$(".toggle").click( function( ) {
$(".content").slideToggle();
});
$(".open").click( function( ) {
$(".content").slideDown();
});
$(".close").click( function( ) {
$(".content").slideUp();
});

关于javascript - 在父级之外切换 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13375075/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com