javascript - 鼠标悬停时鼠标悬停菜单不消失

因此，我试图编辑Shopify的代码，以使商店中的菜单悬停打开，而无需单击。在帮助下，菜单现在会在悬停时打开，但在鼠标移开时不会关闭。我想我的选择是更改CSS，JQuery脚本或控制菜单的Javascript。我已经尝试将Javascript中所有表示“单击”的内容更改为“鼠标悬停”，并且除了菜单在您单击下拉菜单中时消失的菜单之外，都可以使用。这是我现在拥有的代码，我将“鼠标悬停”改回了“点击”。

我一直在使用CSS和Javascript困扰了7天，试图使其正常工作。我将所有内容都改回Shopify的方式，因此至少可以正常工作，您可以在此处查看该站点：AlexAndIvy.MyShopify.com的密码为staysk。

这是来自控制台的HTML：

<div data-section-id="header" data-section-type="header-section">
  <header class="site-header border-bottom logo--left" role="banner">
    <div class="grid grid--no-gutters grid--table">
        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          <ul class="site-nav list--inline " id="SiteNav">


      <li class="site-nav--has-dropdown">
        <a href="/collections/bedding" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-bedding">
          Bedding
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 498.98 284.49"><defs><style>.cls-1{fill:#231f20}</style></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
          <span class="visually-hidden">expand</span>
        </a>

        <div class="site-nav__dropdown" id="SiteNavLabel-bedding" style="display: block;">
          <ul>
              <li class="site-nav--active">
                <a href="/collections/sheet-sets" class="site-nav__link site-nav__child-link">Sheet Sets</a>
              </li>
          </ul>
        </div>
      </li>
</ul>
        </nav>
        </div>
      </div>
    </div>

具体来说，标头后的这部分是使它们在悬停时打开的原因：

  <script>
     $('.site-nav--has-dropdown').hover(function(){
    $(this).children('.site-nav__dropdown').css("display", "block")
  });
  $('.site-nav__dropdown').mouseout(function(){
    $(this).css('display', 'none')
  });
  </script>

然后是CSS：

/*================ #Site Nav and Dropdowns ================*/

.site-nav {
  position: relative;
  padding: 0;
  text-align: center;
  margin: 25px 0;

  a {
    padding: 3px 10px;
  }

  li {
    display: inline-block;
  }
}

.site-nav--centered {
  padding-bottom: $gutter-site-mobile;
}

/*================ Site Nav Links ================*/
.site-nav__link {
  display: block;
  white-space: nowrap;

  .site-nav--centered & {
    padding-top: 0;
  }

  .icon-chevron-down {
    width: 8px;
    height: 8px;
    margin-left: 2px;

    .site-nav--active-dropdown & {
      transform: rotateZ(-180deg);
    }
  }

  &.site-nav--active-dropdown {
    border: 1px solid $color-border;
    border-bottom: 1px solid transparent;
    z-index: 2;
  }
}

/*================ Dropdowns ================*/
.site-nav--has-dropdown {
  position: relative;
}

.site-nav--has-centered-dropdown {
  position: static;
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  padding: $dropdown-padding;
  margin: 0;
  z-index: $z-index-dropdown;
  text-align: left;
  border: 1px solid $color-border;
  background: $color-bg;
  left: -1px;
  top: 41px;

  .site-nav__link {
    padding: 4px 30px 4px 0;
  }

  .site-nav--active-dropdown & {
    display: block;
  }

  li {
    display: block;
  }
}

// Centered dropdown
.site-nav__dropdown--centered {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  text-align: center;
}

/*================ Child list ================*/
.site-nav__childlist {
  display: inline-block;
  border: 1px solid $color-border;
  background: $color-bg;
  padding: $dropdown-padding;
  text-align: left;
}

Javascript：

  function init() {
    cacheSelectors();
    cache.$parents.on('click.siteNav', function(evt) {
      var $el = $(this);

      if (!$el.hasClass(config.activeClass)) {
        // force stop the click from happening
        evt.preventDefault();
        evt.stopImmediatePropagation();
      }

      showDropdown($el);
    });

    // check when we're leaving a dropdown and close the active dropdown
    $(selectors.siteNavChildLink).on('focusout.siteNav', function() {
      setTimeout(function() {
        if ($(document.activeElement).hasClass(config.childLinkClass) || !cache.$activeDropdown.length) {
          return;
        }

        hideDropdown(cache.$activeDropdown);
      });
    });

    // close dropdowns when on top level nav
    cache.$topLevel.on('focus.siteNav', function() {
      if (cache.$activeDropdown.length) {
        hideDropdown(cache.$activeDropdown);
      }
    });

    cache.$subMenuLinks.on('click.siteNav', function(evt) {
      // Prevent click on body from firing instead of link
      evt.stopImmediatePropagation();
    });
  }

最佳答案

以下应该为您工作

.site-nav {
   margin: 0; /* remove 25px margin to top and bottom */
}

.site-nav li {
   padding: 25px 0; /* put the spacing back in as padding on the li */
}

li.site-nav--has-dropdown:hover > .site-nav__dropdown {
   display: inline-block;
}

.site-nav__dropdown {
       top: initial; /* no need for top:41px anymore */
    }