Question

这有点疯狂，我不确定是什么问题。我想让DIV可点击以显示/隐藏儿童div。但是，一旦我隐藏了一个孩子，我就无法取消隐藏它。

这是我的整个代码。任何帮助赞赏。在下面的示例中，单击“取消”按钮时，我无法取消隐藏inner1。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

<div class="wrapper">
    <div class="inner1">
    1
    </div>

    <div class="inner2" style='display:none'>
    2 <input type='button' value='cancel' class='cancel'>
    </div>

</div>


<style>
div {border:1px solid red;}
</style>

<script>
$(document).ready(function() { 
        $('.wrapper').live("click", function(){
            $('.inner1').hide();
            $('.inner2').show();
        });


        $('.cancel').live("click", function(){
            $('.inner1').show();
            $('.inner2').hide();
        });
});
</script>

Answer 1

您需要停止click上的.cancel冒充，也点击.wrapper，然后使用.stopPropagation()，就像这样：

$('.cancel').live("click", function(e){
  $('.inner1').show();
  $('.inner2').hide();
  e.stopPropagation();
});

You can test it out here。目前正在发生的是隐藏它，但.wrapper点击处理程序会获得点击并立即再次显示.inner2。

可点击的父DIV显示和隐藏子DIV在jQuery中有问题

1 个答案: