jQuery mouseenter() 函数未按预期工作

Question

我正在尝试 div。当悬停在它上面时（我正在使用 mouseenter 和 mouseleave jquery 函数） div 改变它的大小，当点击它时它应该显示另一个 div.为此，我正在使用 click 函数。它有时有效，有时无效。这是我的 jquery 代码。

$(document).ready(function() {
  $('.box').mouseenter(function() {
    $('.mainBox').css('font-size', '32px');
    $('.box').css('overflow', 'auto');
    $('.box').click(function(e) {
      e.preventDefault();
      console.log('clicked');
      $('.box2').css('display', 'block');
    });
  });
  $('.mainBox').mouseleave(function() {
    $('.mainBox').css('font-size', '16px');
    $('.box').css('overflow', 'auto');
    $('.box').css('background-color', 'white');
  });
}); // End of document ready function

body {
  padding: 0;
  margin: 0;
  background-color: lightgray;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.mainBox {
  margin: auto;
  margin-top: 20px;
  border: 1px solid;
  background-color: white;
  padding: 10px;
  width: 80%;
  resize: both;
  overflow: auto;
  transition: font-size .5s;
}

.dBox {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 20px;
  border: 1px solid gray;
  width: 80%;
  padding: 20px;
  background-color: gainsboro;
}

.box {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid white;
  padding: 20px;
  background-color: gainsboro;
}

.box2 {
  border: 1px solid gray;
  padding: 20px;
  background-color: gainsboro;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
  <div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
  <div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>

</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>

<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
  light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

Answer 1

您正在链接多个事件绑定。在您的代码中，每次触发 mouseenter 时，都会向 click 事件添加一个新的回调。

$(document).ready(function() {
  $('.box').mouseenter(function() {
    $('.mainBox').css('font-size', '32px');
    $('.box').css('overflow', 'auto');
  });
  $('.mainBox').mouseleave(function() {
    $('.mainBox').css('font-size', '16px');
    $('.box').css('overflow', 'auto');
    $('.box').css('background-color', 'white');
  });
  $('.box').click(function(e) {
      e.preventDefault();
      if($('.box2').css('display') === 'block'){
        $('.box2').css('display', 'none');
      } else {
        $('.box2').css('display', 'block');
      }
    });
}); // End of document ready function

body {
  padding: 0;
  margin: 0;
  background-color: lightgray;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.mainBox {
  margin: auto;
  margin-top: 20px;
  border: 1px solid;
  background-color: white;
  padding: 10px;
  width: 80%;
  resize: both;
  overflow: auto;
  transition: font-size .5s;
}

.dBox {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 20px;
  border: 1px solid gray;
  width: 80%;
  padding: 20px;
  background-color: gainsboro;
}

.box {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid white;
  padding: 20px;
  background-color: gainsboro;
}

.box2 {
  border: 1px solid gray;
  padding: 20px;
  background-color: gainsboro;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
  <div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
  <div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>

</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>

<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
  light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

jQuery mouseenter() 函数未按预期工作

jQuery mouseenter() function not working as expected

javascript

jquery

mouseenter