Question

我想在点击元素时打开一个框...然后当我点击“关闭”按钮时让它消失... 但这不起作用。该框使用“display：block”显示，但不会因“display：none”而消失（参见随附的代码）

（我也尝试使用带有css attribut的类的addClass和removeClass，例如display：none但是也没有用。）

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <style>
            div.back {  
                float: left;
                background-color: grey;
                width:100px;
                height:100px;
                margin:10px;
                padding:10px;
            }
            .window {
                display: none;
                position: fixed;
                top: 150px;
                left: 150px;
                width:150px;
                height:100px; 
                background-color:blue;
            }
        </style>
        <script>
            $(document).ready(function(){
                $(".back").click(function(){       
                    $(".window").css("display","block");     
                });
                $(".btn_validate").click(function(){        
                    $(".window").css("display","none");              
                });
            });
        </script>
    </head>
    <body>
        <div class="back">
            Some text
            <div id="draggable" class="window">
                <input type="button" value="CLOSE" class="btn_validate"/>
            </div>
        </div>
    </body>
</html>

Answer 1

实际上它确实隐藏了，但随后又重新打开，因为点击会冒泡并触发父对象的点击。使用e.stopPropagation();进行修复：

$(".btn_validate").click(function (e) {
    e.stopPropagation();
    $(".window").css("display", "none");
});

<强> jsFiddle example

Answer 2

被您的设置display: none隐藏了......但随后会立即再次显示，因为点击会冒泡到您的.back元素。

您可以使用e.stopPropagation()或return false;（j return false;和e.stopPropagation()中的e.preventDefault()来阻止它。 Example

$(".btn_validate").click(function(){        
      $(".window").css("display","none");              
      return false;
});

或（example）

$(".btn_validate").click(function(e){        
      e.stopPropagation();
      $(".window").css("display","none");              
});

使用display：block后无法隐藏div

2 个答案: