Question

我在HTML中设计了一个简单的侧边栏，并且我开发了一个脚本，其中当鼠标进入和离开时，侧边栏分别关闭和打开。

您可以在此处签出DEMO。

我在整个侧边栏中都使用了Vue.js实例，除了鼠标悬停在侧边栏中的任何项目然后鼠标离开时，侧边栏的关闭非常慢之外，一切工作正常。 / p>

Answer 1

您应该使用mouseenter而不是List<String> hex = mapAll(Arrays.asList(10, 20, 30, 40, 50), Integer::toHexString); ..

mouseover

Codepen

Answer 2

您可以更改动画时间，例如设置50

closeSideBar: function() {
  $("#custom-erp-id-side-nav")
    .off()
    .animate({ left: "-230px" }, 50);
}

Answer 3

正在发生的事情是您正在排队很多事件。在某些情况下，您可能会遇到一个打开和关闭循环，直到您移动鼠标为止。即使您使用mouseenter而不是mouseover也会发生这种情况。

您可以让打开和关闭例程分别设置一个Gatekeeper变量，以确保它们不会尝试多次打开（或关闭）。在complete的{{1}}参数中，您未设置网守变量。

animate

    openSideBar: function() {
      if (!this.opening) {
        this.opening = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "0px"
          }, null, null, () => {
            this.opening = false;
          });
      }
    },
    closeSideBar: function() {
      if (!this.closing) {
        this.closing = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "-230px"
          }, null, null, () => {
            this.closing = false;
          });
      }
    }

// vue instance for the sidebar menu
var erp_custom_side_bar = new Vue({
  el: "#custom-erp-id-side-nav",
  data: {},
  methods: {
    //function to close/open the child elements
    //when the parent menu is clicked.
    toggleOpenChild: function(event) {
      var currentParent = $(event.currentTarget)
        .find(".custom-erp-menu-parent")
        .text();
      var childListID = currentParent.toLowerCase().replace(/ /g, "-");
      $(".custom-erp-menu-list > ul")
        .not($("#" + childListID + "-child"))
        .slideUp()
        .removeClass("custom-erp-menu-child-open");
      if ($("#" + childListID + "-child").is(":hidden")) {
        $("#" + childListID + "-child")
          .slideDown(300)
          .toggleClass("custom-erp-menu-child-open");
      } else {
        $("#" + childListID + "-child")
          .slideUp(300)
          .toggleClass("custom-erp-menu-child-open");
      }
    },
    openSideBar: function() {
      if (!this.opening) {
        this.opening = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "0px"
          }, null, null, () => {
            this.opening = false;
          });
      }
    },
    closeSideBar: function() {
      if (!this.closing) {
        this.closing = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "-230px"
          }, null, null, () => {
            this.closing = false;
          });
      }
    }
  }
});

.custom-erp-side-nav {
  height: 100%;
  width: 240px;
  position: fixed;
  z-index: 1;
  top: 56px;
  left: 0;
  background-color: #2b333e;
  overflow-x: hidden;
  padding-top: 20px;
  left: -230px;
}

.custom-erp-side-nav-open {
  left: 0;
}

.custom-erp-menu-list a {
  padding: 10px 5px 10px 40px;
  text-decoration: none;
  letter-spacing: 0.3px;
  font-size: 16px;
  color: #aeb7c2;
  display: block;
}

.custom-erp-menu-list>a {
  padding-left: 20px;
}

.custom-erp-menu-list a:hover {
  color: #f1f1f1 !important;
  background-color: rgb(56, 65, 74);
}

.custom-erp-menu-list a:hover .custom-erp-module-list-icon {
  filter: brightness(0) invert(1);
}

.custom-erp-module-list-icon {
  margin-right: 10px;
}

.custom-erp-menu-child-dropdown {
  display: none;
  background-color: #252c35;
  border-left: 3px solid #3cabfe;
}

.custom-erp-menu-child-dropdown>a:hover {
  background-color: rgb(56, 65, 74);
}

#custom-erp-menu-lists {
  padding-left: 0px !important;
}

.custom-erp-menu-child-open {
  display: block;
}

mouseleave事件在vue.js中触发

3 个答案: