javascript - 我只想在一些 div 中创建简单的菜单链接？

Question

我只是想在一些动画 div 中创建简单的菜单链接，问题是如果鼠标移到里面的 (li) 上 div 会消失，但如果 div 为空它就可以正常工作？

我想到的第一件事是我必须防止事件传播，所以我将其添加到总和菜单((li))内的元素，但仍然面临同样的问题。

function hidemneu() {
  $('#submenu1').hide('fold', 'slow');
  $('#submenu2').hide('fold', 'slow');
  $('#submenu3').hide('fold', 'slow');
  $('#submenu4').hide('fold', 'slow');
}

$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);

$('#btn1').on('mouseover', function() {
  hidemneu();

  $('#submenu1').offset({

    left: $('#btn1').offset().left
  });


  $('#submenu1').show("fold");


});
$('#btn2').on('mouseover', function() {
  hidemneu();


  $('#submenu2').offset({

    left: $('#btn2').offset().left
  });


  $('#submenu2').show("fold");


});

$('#btn3').on('mouseover', function() {

  hidemneu();

  $('#submenu3').offset({

    left: $('#btn3').offset().left
  });


  $('#submenu3').show("fold");


});


$('#btn4').on('mouseover', function() {

  hidemneu();

  $('#submenu4').offset({

    left: $('#btn4').offset().left
  });


  $('#submenu4').show("fold");


});


$("a").on('mouseover', function(event) {

  event.stopPropagation();

});

$("li").on('mouseover', function(event) {

  event.stopPropagation();

});


$("ul").on('mouseover', function(event) {

  event.stopPropagation();

});

#btn1,
#btn2,
#btn3,
#btn4 {
  display: inline-block;
  background-color: #ff8d73;
  width: 100px;
  outline: 1px dashed #000000;
  padding-right: 30px;
}
#menu-wrapper {
  width: 100%;
  background-color: #b7dcff;
  text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
  width: 300px;
  height: 200px;
  outline: 1px dashed #000000;
  float: left;
  left: 0;
  position: absolute;
  display: none;
}
#submenu1 {
  background-color: #f00700
}
#submenu2 {
  background-color: #a6baf0
}
#submenu3 {
  background-color: #7af044
}
#submenu4 {
  background-color: #f0dc35
}
#sub_wrapper:after {
  clear: both;
}
li,
a {
  outline: 1px dashed #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
  <div id='btn1'>button 1</div>
  <div id='btn2'>button 2</div>
  <div id='btn3'>button 3</div>
  <div id='btn4'>button 4</div>
</div>

<div id="sub_wrapper">
  <div id="submenu1">

    <ul>
      <li>option 1</li>
      <li>oprion 2</li>

    </ul>
  </div>


  <div id="submenu2">
    <a href="#"> clcik me 1 </a>



  </div>
  <div id="submenu3"></div>
  <div id="submenu4"></div>
</div>

Answer 1

更改 javascript 的第 8 行似乎可以解决问题:

来自:

 $('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);

到

 $('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);

function hidemneu() {
  $('#submenu1').hide('fold', 'slow');
  $('#submenu2').hide('fold', 'slow');
  $('#submenu3').hide('fold', 'slow');
  $('#submenu4').hide('fold', 'slow');
}

$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);

$('#btn1').on('mouseover', function() {
  hidemneu();

  $('#submenu1').offset({

    left: $('#btn1').offset().left
  });


  $('#submenu1').show("fold");


});
$('#btn2').on('mouseover', function() {
  hidemneu();


  $('#submenu2').offset({

    left: $('#btn2').offset().left
  });


  $('#submenu2').show("fold");


});

$('#btn3').on('mouseover', function() {

  hidemneu();

  $('#submenu3').offset({

    left: $('#btn3').offset().left
  });


  $('#submenu3').show("fold");


});


$('#btn4').on('mouseover', function() {

  hidemneu();

  $('#submenu4').offset({

    left: $('#btn4').offset().left
  });


  $('#submenu4').show("fold");


});


$("a").on('mouseover', function(event) {

  event.stopPropagation();

});

$("li").on('mouseover', function(event) {

  event.stopPropagation();

});


$("ul").on('mouseover', function(event) {

  event.stopPropagation();

});

#btn1,
#btn2,
#btn3,
#btn4 {
  display: inline-block;
  background-color: #ff8d73;
  width: 100px;
  outline: 1px dashed #000000;
  padding-right: 30px;
}
#menu-wrapper {
  width: 100%;
  background-color: #b7dcff;
  text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
  width: 300px;
  height: 200px;
  outline: 1px dashed #000000;
  float: left;
  left: 0;
  position: absolute;
  display: none;
}
#submenu1 {
  background-color: #f00700
}
#submenu2 {
  background-color: #a6baf0
}
#submenu3 {
  background-color: #7af044
}
#submenu4 {
  background-color: #f0dc35
}
#sub_wrapper:after {
  clear: both;
}
li,
a {
  outline: 1px dashed #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
  <div id='btn1'>button 1</div>
  <div id='btn2'>button 2</div>
  <div id='btn3'>button 3</div>
  <div id='btn4'>button 4</div>
</div>

<div id="sub_wrapper">
  <div id="submenu1">

    <ul>
      <li>option 1</li>
      <li>oprion 2</li>

    </ul>
  </div>


  <div id="submenu2">
    <a href="#"> clcik me 1 </a>



  </div>
  <div id="submenu3"></div>
  <div id="submenu4"></div>
</div>