Question

我有一个虚拟div和一个实际的div作为我的顶级菜单。我希望在鼠标离开editor-menu-bar时显示menu-bar-dummy，并在鼠标离开editor-menu-bar时隐藏menu-bar-dummy。

这段代码几乎没用。它只是编辑器菜单栏保持闪烁。快速调试显示，即使我将鼠标移到mouseleave或menubar

上的任何位置，我的menubardummy功能也会继续触发

我在这里做错了什么？

＆＃13;

var menubar = $('.editor-menu-bar');
var menubardummy = $('.menu-bar-dummy');
menubardummy.mouseenter(function() {
  menubar.slideDown();
}).mouseleave(function() {
  menubar.slideUp();
});

＆＃13;

.menu-bar-dummy {
  position: absolute;
  top: 0px;
  left: 0px;
  min-height: 55px;
  z-index: -100;
}

.editor-menu-bar {
  min-height: 50px;
  height: 50px;
  padding-top: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 zero-padd menu-bar-dummy"></div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 editor-menu-bar" style="display: none;">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 logo">
    <img src="./img/c.png" height="40px">
  </div>
</div>

＆＃13;

Answer 1

我明白了。此代码有效 -

var menubar = $('.editor-menu-bar');
    var menubardummy = $('.menu-bar-dummy');
    menubardummy.mouseenter(function(){
        menubar.slideDown("slow", function(){
            menubar.mouseleave("slow", function(){
                menubar.slideUp();
            });
        });
    });

正在发生的事情是，一旦完成slideDown，就会触发针对menubardummy的mouseleave，因为菜单栏正在上面。这导致了弹跳效应。

新css（注意z-index） -

.menu-bar-dummy{position:absolute; top:0px; left:0px; min-height:55px; z-index:9000; width:100%;}

.editor-menu-bar{min-height:50px; height:50px; padding-top:5px; z-index:10000; box-shadow:0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); display:none;}

Answer 2

在这里我编辑了你的代码，希望它适合你

$(document).ready(function(){
        $('.editor-menu-bar').slideUp();
        $('.menu-bar-dummy').mouseenter(function() {
            $('.editor-menu-bar').slideDown();
        });
        $('.menu-bar-dummy').mouseleave(function() {
            $('.editor-menu-bar').slideUp();
        });
    })
    // var menubar = $('.editor-menu-bar');
    // var menubardummy = $('.menu-bar-dummy');
    // menubardummy.mouseenter(function() {
    //   menubar.slideDown();
    // }).mouseleave(function() {
    //   menubar.slideUp();
    // });

.menu-bar-dummy {
      position: absolute;
      width: 100px;
      border: 1px solid #000;
      top: 0px;
      left: 0px;
      min-height: 55px;
      z-index: -100;
    }

    .editor-menu-bar {
      min-height: 50px;
      height: 50px;
      padding-top: 5px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 zero-padd menu-bar-dummy"></div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 editor-menu-bar">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 logo">
    <img src="./img/c.png" height="40px">
  </div>
</div>

鼠标进入div时显示顶部菜单栏

2 个答案: