使用display:block后无法隐藏div

Question

使用display:block后无法隐藏div

我想在点击元素时打开一个框...然后当我点击"关闭"按钮时让它消失...但这不起作用.该框确实通过使用"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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

j08*_*691 7

实际上它确实隐藏了,但随后它再次向上打开,因为点击气泡并触发父对象的点击.使用e.stopPropagation();来解决它:

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

Run Code Online (Sandbox Code Playgroud)

jsFiddle例子

归档时间：	11 年前
查看次数：	1256 次
最近记录：	11 年前