Question

所以我正在尝试编辑Shopify的代码，使我的商店中的菜单在悬停时打开而不必点击。在帮助下，菜单现在在悬停时打开，但它们不会在mouseout上关闭。我想我的选择是更改CSS，JQuery脚本或控制菜单的Javascript。我已经尝试将Javascript中“点击”的所有内容更改为“鼠标悬停”，当您尝试单击下拉菜单中的链接时，菜单会消失。这是我现在的代码，我将'mouseover'改回'点击'。

我一直在搞乱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();
    });
  }

Answer 1

以下内容适用于您

.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 */
    }

Answer 2

而不是

sudo chmod 0755 -R /var/www/html

试

$('.site-nav__dropdown').mouseout(function(){ $(this).css('display', 'none') });

Answer 3

Find below the working example with only CSS. No need to write javascript.

HTML Code

<div class="parent">
        <button class="dropbtn">Dropdown</button>
        <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">News</a>
        <a href="#">Contact</a>
        </div>
   </div>

CSS Code

/* The side navigation menu */
.sidenav {
    height: 100%;
    width: 200px;
    display:none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.parent {
    position: relative;
    display: inline-block;
}

.parent:hover  .sidenav {
    display:block;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

鼠标悬停菜单上不会出现悬停菜单

3 个答案: