javascript - 导航 : Sub menu should display when hovered? - 不工作

标签 javascript jquery html css navigation

所以我正在创建一个导航。 问题是，单击“+”符号时会显示子菜单。尝试对其进行更改，以便在将鼠标悬停在父菜单项(即服务项)上时显示子菜单。

尝试:我试过使用 .hover (

/* ON HOVER - ADDED */
    container.find('.dropdown-toggle').hover(function(e) { ... code below

) 使用 jquery，此时当鼠标悬停在“+”上时，它显示得非常快，然后消失，然后再次显示。

/* global ethemeScreenReaderText */
/**
 * Theme functions file.
 *
 * Contains handlers for navigation and widget area.
 */

(function($) {
  var masthead, menuToggle, siteNavigation;

  function initMainNavigation(container) {

    // Add dropdown toggle that displays child menu items.
    var dropdownToggle = $('<button />', {
        'class': 'dropdown-toggle',
        'aria-expanded': false
      })
      .append($('<span />', {
        'class': 'dropdown-symbol',
        text: '+'
      }))
      .append($('<span />', {
        'class': 'screen-reader-text',
        text: ethemeScreenReaderText.expand
      }));

    container.find('.menu-item-has-children > a, .page_item_has_children > a').after(dropdownToggle);

    container.find('.dropdown-toggle').click(function(e) {
      var _this = $(this),
        screenReaderSpan = _this.find('.screen-reader-text');
      dropdownSymbol = _this.find('.dropdown-symbol');
      dropdownSymbol.text(dropdownSymbol.text() === '-' ? '+' : '-');

      e.preventDefault();
      _this.toggleClass('toggled-on');
      _this.next('.children, .sub-menu').toggleClass('toggled-on');

      _this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false');

      screenReaderSpan.text(screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand);
    });
    /* ON HOVER - ADDED */
    container.find('.dropdown-toggle').hover(function(e) {
      var _this = $(this),
        screenReaderSpan = _this.find('.screen-reader-text');
      dropdownSymbol = _this.find('.dropdown-symbol');
      dropdownSymbol.text(dropdownSymbol.text() === '-' ? '+' : '-');

      e.preventDefault();
      _this.toggleClass('toggled-on');
      _this.next('.children, .sub-menu').toggleClass('toggled-on');

      _this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false');

      screenReaderSpan.text(screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand);
    });
  }

  initMainNavigation($('.main-navigation'));

  masthead = $('#masthead');
  menuToggle = masthead.find('.menu-toggle');
  siteNavigation = masthead.find('.main-navigation > div > ul');

  // Enable menuToggle.
  (function() {

    // Return early if menuToggle is missing.
    if (!menuToggle.length) {
      return;
    }

    // Add an initial values for the attribute.
    menuToggle.add(siteNavigation).attr('aria-expanded', 'false');

    menuToggle.on('click.etheme', function() {
      $(siteNavigation.closest('.main-navigation'), this).toggleClass('toggled-on');

      $(this)
        .add(siteNavigation)
        .attr('aria-expanded', $(this).add(siteNavigation).attr('aria-expanded') === 'false' ? 'true' : 'false');
    });
  })();

  // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
  (function() {
    if (!siteNavigation.length || !siteNavigation.children().length) {
      return;
    }

    // Toggle `focus` class to allow submenu access on tablets.
    function toggleFocusClassTouchScreen() {
      if ('none' === $('.menu-toggle').css('display')) {

        $(document.body).on('touchstart.etheme', function(e) {
          if (!$(e.target).closest('.main-navigation li').length) {
            $('.main-navigation li').removeClass('focus');
          }
        });

        siteNavigation.find('.menu-item-has-children > a, .page_item_has_children > a')
          .on('touchstart.etheme', function(e) {
            var el = $(this).parent('li');

            if (!el.hasClass('focus')) {
              e.preventDefault();
              el.toggleClass('focus');
              el.siblings('.focus').removeClass('focus');
            }
          });

      } else {
        siteNavigation.find('.menu-item-has-children > a, .page_item_has_children > a').unbind('touchstart.etheme');
      }
    }

    if ('ontouchstart' in window) {
      $(window).on('resize.etheme', toggleFocusClassTouchScreen);
      toggleFocusClassTouchScreen();
    }

    siteNavigation.find('a').on('focus.etheme blur.etheme', function() {
      $(this).parents('.menu-item, .page_item').toggleClass('focus');
    });
  })();

  // Add the default ARIA attributes for the menu toggle and the navigations.
  function onResizeARIA() {
    if ('block' === $('.menu-toggle').css('display')) {

      if (menuToggle.hasClass('toggled-on')) {
        menuToggle.attr('aria-expanded', 'true');
      } else {
        menuToggle.attr('aria-expanded', 'false');
      }

      if (siteNavigation.closest('.main-navigation').hasClass('toggled-on')) {
        siteNavigation.attr('aria-expanded', 'true');
      } else {
        siteNavigation.attr('aria-expanded', 'false');
      }
    } else {
      menuToggle.removeAttr('aria-expanded');
      siteNavigation.removeAttr('aria-expanded');
      menuToggle.removeAttr('aria-controls');
    }
  }

  $(document).ready(function() {
    $(window).on('load.etheme', onResizeARIA);
    $(window).on('resize.etheme', onResizeARIA);
  });

})(jQuery);
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/


/*c */

.main-navigation {
  display: block;
  clear: left;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-top: 1em;
  padding-left: 0;
}

.main-navigation ul ul {
  display: none;
  top: 1.5em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  top: 0;
}

.main-navigation ul ul li {
  padding-left: 1em;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: inline-block;
  width: 100%;
  padding: .5em 1em .5em 0;
  text-decoration: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bolder;
}

.main-navigation a:hover,
.main-navigation a:focus {
  text-decoration: underline;
}

.main-navigation .menu-item-has-children,
.main-navigation .page_item_has_children {
  min-width: 218px;
}

.main-navigation .menu-item-has-children>a,
.main-navigation .page_item_has_children>a {
  padding-right: 2em;
}

button.dropdown-toggle {
  position: absolute;
  right: 0;
  border: none;
  background: inherit;
  color: white;
  line-height: 1.5em;
  padding: .4em 1em .4em .5em;
}


/* Burger Nav */

#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 15px;
  cursor: pointer;
  margin: 20px;
  position: relative;
  top: 0px;
}

#sidebar-btn span {
  height: 2px;
  background: black;
  margin-bottom: 5px;
  display: block;
}

#sidebar-btn span:nth-child(2) {
  width: 75%;
}

#sidebar-btn span:nth-child(3) {
  width: 50%;
}

.menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  margin: 1.8rem;
  /*	padding: .6em .8em;
*/
  font-size: 80%;
  text-transform: uppercase;
  /*	color: white;
*/
  /*	border: 1px solid rgba(255, 255, 255, 0.3);
*/
}


/* Toggle small menu and children on */

.toggled-on ul,
.sub-menu.toggled-on {
  display: block;
}

@media screen and (min-width: 601px) {
  .menu-toggle {
    display: none;
  }
  .main-navigation .menu-item-has-children>a,
  .main-navigation .page_item_has_children>a {
    padding-right: 2em;
    background: rgba(255, 255, 255, 0.1);
  }
  .main-navigation ul {
    display: block;
    display: flex;
    flex-wrap: wrap;
  }
  .main-navigation ul ul {
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 0;
  }
  .main-navigation ul ul li {
    padding-left: 0;
  }
  .main-navigation ul ul li a {
    width: 218px;
    background: none;
  }
  .main-navigation ul li a {
    padding: .4em 1em;
  }
}

@media screen and (min-width: 900px) {
  .main-navigation ul {
    justify-content: flex-end;
    padding-top: 0;
  }
  /* If you want dropdowns to open on hover, uncomment this: */
  .main-navigation ul i:hover>ul,
  .main-navigation ul li:focus>ul {
    display: block;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}
<header id="masthead" class="site-header">
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
  <div class="header-wrapper">
    <div class="site-branding">
      <div class="site-branding-text">
        <p class="site-title"><a href="http://localhost/wordpress/" rel="home">Olsen Electrical</a></p>
        <p class="site-description">Its an awesome website</p>
      </div>
    </div>
    <!-- .site-branding -->

    <nav id="site-navigation" class="main-navigation">
      <button class="menu-toggle">Primary Menu</button>
      <div class="menu-primary-menu-links-container">
        <ul id="primary-menu" class="menu">
          <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/wordpress/home/">Home</a></li>
          <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
          <li id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2009 current_page_item menu-item-has-children menu-item-2015 focus"><a href="http://localhost/wordpress/services/">Services</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
            <ul class="sub-menu">
              <li id="menu-item-2033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2033"><a href="http://localhost/wordpress/gallery/">Gallery</a></li>
              <li id="menu-item-2032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2032"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
            </ul>
          </li>
          <li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1987"><a href="http://localhost/wordpress/gallery/">Projects</a></li>
          <li id="menu-item-2016" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2016"><a title="1800 495 290" href="http://www.google.com">1800 495 290</a></li>
        </ul>
      </div>
    </nav>
    <!-- #site-navigation -->
  </div>
</header>

最佳答案 

<html>
<header id="masthead" class="site-header">
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>


<style>

.main-navigation {
  display: block;
  clear: left;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-top: 1em;
  padding-left: 0;
}

.main-navigation ul ul {
  display: none;
  top: 1.5em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  top: 0;
}

.main-navigation ul ul li {
  padding-left: 1em;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: inline-block;
  width: 100%;
  padding: .5em 1em .5em 0;
  text-decoration: none;
  color: #000;
  font-size: 1.1rem;
  font-weight: bolder;
}

.main-navigation a:hover,
.main-navigation a:focus {
  text-decoration: underline;
}

.main-navigation .menu-item-has-children,
.main-navigation .page_item_has_children {
  min-width: 218px;
}

.main-navigation .menu-item-has-children>a,
.main-navigation .page_item_has_children>a {
  padding-right: 2em;
}

button.dropdown-toggle {
  position: absolute;
  right: 0;
  border: none;
  background: inherit;
  color: black;
  line-height: 1.5em;
  padding: .4em 1em .4em .5em;
}




#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 15px;
  cursor: pointer;
  margin: 20px;
  position: relative;
  top: 0px;
}

#sidebar-btn span {
  height: 2px;
  background: black;
  margin-bottom: 5px;
  display: block;
}

#sidebar-btn span:nth-child(2) {
  width: 75%;
}

#sidebar-btn span:nth-child(3) {
  width: 50%;
}

.menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;

}


/* Toggle small menu and children on */

.toggled-on ul,
.sub-menu.toggled-on {
  display: block;
}
.sub-menu li:hover,
.sub-menu li:focus{
    background:red;
}

@media screen and (min-width: 601px) {
  .menu-toggle {
    display: none;
  }
  .main-navigation .menu-item-has-children>a,
  .main-navigation .page_item_has_children>a {
    padding-right: 2em;
    background: rgba(255, 255, 255, 0.1);
  }
  .main-navigation ul {
    display: block;
    display: flex;
    flex-wrap: wrap;
  }
  .main-navigation ul ul {
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 0;
  }
  .main-navigation ul ul li {
    padding-left: 0;
  }
  .main-navigation ul ul li a {
    width: 218px;
    background: none;
  }
  .main-navigation ul li a {
    padding: .4em 1em;
  }
}

@media screen and (min-width: 900px) {
  .main-navigation ul {
    justify-content: flex-end;
    padding-top: 0;
  }

  .main-navigation ul i:hover>ul,
  .main-navigation ul li:focus>ul {
    display: block;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}
</style>

</header>
<body>
  <div class="header-wrapper">
    <div class="site-branding">
      <div class="site-branding-text">
        <p class="site-title"><a href="http://localhost/wordpress/" rel="home">Olsen Electrical</a></p>
        <p class="site-description">Its an awesome website</p>
      </div>
    </div>
    </div>
<nav id="site-navigation" class="main-navigation">
      <button class="menu-toggle">Primary Menu</button>
      <div class="menu-primary-menu-links-container">
        <ul id="primary-menu" class="menu">
          <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/wordpress/home/">Home</a></li>
          <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
          <li id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2009 current_page_item menu-item-has-children menu-item-2015 focus"><a href="http://localhost/wordpress/services/">Services</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
            <ul class="sub-menu">
              <li id="menu-item-2033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2033"><a href="http://localhost/wordpress/gallery/">Gallery</a></li>
              <li id="menu-item-2032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2032"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
            </ul>
          </li>
          <li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1987"><a href="http://localhost/wordpress/gallery/">Projects</a></li>
          <li id="menu-item-2016" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2016"><a title="1800 495 290" href="http://www.google.com">1800 495 290</a></li>
        </ul>
      </div>
    </nav>
</body>
</html>

关于javascript - 导航 : Sub menu should display when hovered? - 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47545083/

上一篇：jquery 覆盖重要的 css 样式

下一篇：javascript - 随着屏幕变大，Div 漂浮到一边？

相关文章：

javascript - jPlayer 过早结束轨道 2-8%(几秒)？

javascript - 用户在表单中提交错误的电子邮件后如何回滚到之前的状态

jquery验证: remove error message from form

html - 在 Angular 2 中重置或重新加载同一页面

html - 仅使用 .css 编辑更改 <div> 位置

javascript - 将 "this"传递给 jQuery 中的函数问题

javascript - 如何从 CI 构建管道发布 NPM 包并仍然自动化版本控制？

javascript - Jquery - ajax 和 FormData 之后单击事件停止工作

jquery 将外部 html 文件附加到我的页面中

html - 在背景图像上应用不透明度滤镜？

©2024 IT工具网  联系我们