0

我试图在单击时使 div 淡入，然后当单击嵌套在此 div 中的 div 时，初始 div 淡出。它运行良好，直到涉及 jQuery 的淡出部分，它最初淡出，但随后返回。

继承人的HTML

<html>
<head>
    <title>Kapow!</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>
      <div class = "box">
          <div class = "boxinfo">
            <div class = "exit"></div>
          </div>
      </div>
</body>
</html>

CSS：

.box {
    height: 100px;
    width: 100px;
    background: yellow;
    margin: auto;
    text-align: center;
}

.boxinfo {
    height: 300px;
    display: none;
    width: 200px;
    background: green;
    margin: auto;
}

.exit {
    height: 25px;
    width: 25px;
    background: red;
    margin-top: 50px;
    float: right;
}

和 jQuery：

$(document).ready(function(){
  $('.box').click(function(){
    $('.boxinfo').fadeIn();    
  });
});

$(document).ready(function(){
  $('.exit').click(function(){
    $('.boxinfo').fadeOut('slow');
    $('.exit').fadeOut('slow');
    });
});

http://codepen.io/anon/pen/xujyb用于演示

4

1 回答 1

3

单击嵌套元素也会触发对父元素的单击，这称为传播。

$(document).ready(function(){
    $('.box').click(function(){
        $('.boxinfo').fadeIn();    
    });

    $('.exit').click(function(e){
        e.stopPropagation();
        $('.boxinfo').fadeOut('slow');
    });
});
于 2013-07-16T09:14:08.997 回答