html 单击子元素时折叠div

0wi1tuuw 于 2022-12-02 发布在其他

关注(0)|答案(3)|浏览(205)

我尝试在单击子元素时折叠父div，如下所示

HTML格式

<div class="expand">
    <h3>expand this div</h3>
    <a href="#" class="collapse" style="display:none;">Collapse</a>
</div>

CSS格式

.expand{
    border:2px dotted green;
}

jQuery查询器

$('.expand').click(function(){
    $(this).stop().animate({
        width:'300px',
        height:'300px'
    });
    $('.collapse').show();
});

 $('.collapse').on('click',function(){
     $('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
 });

它不工作，我也试过使用$(this).parent().animation()，但也不工作。
这里应该做哪些改变？
LIVE FIDDLE HERE

Html

来源：https://stackoverflow.com/questions/16029874/collapse-div-on-click-of-child-element

3条答案

按热度按时间

jgwigjjp1#

试试这个：

$('.collapse').on('click',function(e){
     e.stopPropagation()
     $(this).parent('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
     $(this).hide();
});

DEMO HERE
您的代码无法正常工作，因为在单击内部子div时，父div也被单击了。我们已经使用event.stopPropagation()阻止了这种情况，您的代码可以正常工作。
还添加了$(this).hide()，以在单击时隐藏collapse。

赞(0）回复(0）举报 2022-12-02

wooyq4lh2#

试试看：

$('.expand').on('click', '.collapse',function(e){
 e.stopPropagation();
 $(this).hide();
 $('.expand').stop().animate({
     width: '300px',
     height:'50px'
 });
});

DEMO

赞(0）回复(0）举报 2022-12-02

uajslkp63#

发生这种情况的原因是，您单击.collapse链接会冒泡到.expand div，从而触发回展开功能。

$('.collapse').on('click',function(e){
     e.stopPropagation();
     $('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
 });

http://jsfiddle.net/nvR2S/1/

赞(0）回复(0）举报 2022-12-02

我来回答

html 单击子元素时折叠div

3条答案

相关问题

热门标签

最新问答