javascript - 悬停时显示下拉菜单 - 不起作用

标签 javascript jquery html css drop-down-menu

简单问题:我有一个导航菜单，当点击菜单项旁边的“+”时它会显示子菜单。但它还应该在悬停时显示下拉菜单。

我认为问题可能是:

a) 我没有定位正确的元素吗

b) 切换方法是否错误？

javascript 的新手，所以我不确定这里的问题是什么。

我相信我的脚本是错误的。不知道是什么问题，求助

/* NAVIGATION ON CLICK */

// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
  $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});

// Sub menu drop down
$(".dropdown-toggle").click(function() {

  $(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});


/* NAVIGATION ON HOVER */
// Sub menu drop down 
$(".dropdown-toggle").hover(function() {

  $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});
/*
	# HEADER
 */

*,
html {
  margin: 0;
  font-size: 16px;
}

.site-header {
  background-color: black;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-navigation {
  padding: 2rem;
  background-color: red;
}


/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
 	display: none;
 }
*/


/* Menu styles */

.main-navigation .sub-menu {
  display: none;
}

.sub-menu.toggle-on {
  display: block;
}

.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
  list-style: none;
}

.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
}


/* First Highrarchy */

.main-navigation ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-navigation ul li {
  margin-right: 2rem;
}


/*.dropdown-toggle:hover {
	display: block;
}

*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
  <div class="site-branding">
    <div class="site-branding-text">
      <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
    </div>
  </div>
  <!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation">
    <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
    <div class="menu-test-container">
      <ul id="primary-menu" class="menu" aria-expanded="true">
        <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
          <a href="http://localhost/wordpress/services/">Services</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
              <a href="http://localhost/wordpress/asd/">Commercial</a>
              <button class="dropdown-toggle toggled-on" aria-expanded="true">
									<span class="dropdown-symbol">-</span>
								</button>
              <ul class="sub-menu toggled-on">
                <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
                  <a href="http://localhost/wordpress/asd/">Rural</a>
                  <button class="dropdown-toggle toggled-on" aria-expanded="true">
											<span class="dropdown-symbol">-</span>
										</button>
                  <ul class="sub-menu toggled-on">
                    <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
                      <a href="http://localhost/wordpress/services/">Electrical</a>
                      <button class="dropdown-toggle" aria-expanded="false">
													<span class="dropdown-symbol">+</span>
												</button>
                      <ul class="sub-menu">
                        <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
                          <a href="http://localhost/wordpress/gallery/">Residential</a>
                          <button class="dropdown-toggle" aria-expanded="false">
															<span class="dropdown-symbol">+</span>
														</button>
                          <ul class="sub-menu">
                            <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
          <a href="http://localhost/wordpress/asd/">Projects</a>
        </li>
        <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
          <a href="http://localhost/wordpress/blog/">Blog</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
              <a href="http://localhost/wordpress/news-updates/">About</a>
              <button class="dropdown-toggle" aria-expanded="false">
									<span class="dropdown-symbol">+</span>
								</button>
              <ul class="sub-menu">
                <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
                  <a href="http://localhost/wordpress/news-updates/">News Updates</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
  <link rel="stylesheet" type="text/css" href="style.css">
</header>

最佳答案

只有将鼠标悬停在按钮上时，菜单才会打开。因此，即使将鼠标悬停在菜单本身上，菜单也会关闭。您可以添加以下内容

 $(".sub-menu").hover(function() {
  $(this).addClass("toggle-on");
});

$(".sub-menu").mouseleave(function() {
  $(this).removeClass("toggle-on");
});

由于菜单不是绝对的，因此菜单不断跳转并导致 UI 发生变化。您可以添加以下内容

.sub-menu {
  position: absolute;
  background-color: #000;
  margin-top: -26px;
  margin-left: -38px;
}

下面是一个更新的片段。

/* NAVIGATION ON CLICK */

// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
  $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});

// Sub menu drop down
$(".dropdown-toggle").click(function() {

  $(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});


/* NAVIGATION ON HOVER */
// Sub menu drop down 
$(".dropdown-toggle").hover(function() {

  $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});

$(".sub-menu").hover(function() {

  $(this).addClass("toggle-on");
});

$(".sub-menu").mouseleave(function() {

  $(this).removeClass("toggle-on");
});
/*
	# HEADER
 */

*,
html {
  margin: 0;
  font-size: 16px;
}

.site-header {
  background-color: black;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-navigation {
  padding: 2rem;
  background-color: red;
}


/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
 	display: none;
 }
*/


/* Menu styles */

.main-navigation .sub-menu {
  display: none;
}

.sub-menu.toggle-on {
  display: block;
}

.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
  list-style: none;
}

.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
}


/* First Highrarchy */

.main-navigation ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-navigation ul li {
  margin-right: 2rem;
}

.sub-menu {
  position: absolute;
  background-color: #000;
  margin-top: -26px;
  margin-left: -38px;
}


/*.dropdown-toggle:hover {
	display: block;
}

*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
  <div class="site-branding">
    <div class="site-branding-text">
      <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
    </div>
  </div>
  <!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation">
    <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
    <div class="menu-test-container">
      <ul id="primary-menu" class="menu" aria-expanded="true">
        <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
          <a href="http://localhost/wordpress/services/">Services</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
              <a href="http://localhost/wordpress/asd/">Commercial</a>
              <button class="dropdown-toggle toggled-on" aria-expanded="true">
									<span class="dropdown-symbol">-</span>
								</button>
              <ul class="sub-menu toggled-on">
                <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
                  <a href="http://localhost/wordpress/asd/">Rural</a>
                  <button class="dropdown-toggle toggled-on" aria-expanded="true">
											<span class="dropdown-symbol">-</span>
										</button>
                  <ul class="sub-menu toggled-on">
                    <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
                      <a href="http://localhost/wordpress/services/">Electrical</a>
                      <button class="dropdown-toggle" aria-expanded="false">
													<span class="dropdown-symbol">+</span>
												</button>
                      <ul class="sub-menu">
                        <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
                          <a href="http://localhost/wordpress/gallery/">Residential</a>
                          <button class="dropdown-toggle" aria-expanded="false">
															<span class="dropdown-symbol">+</span>
														</button>
                          <ul class="sub-menu">
                            <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
          <a href="http://localhost/wordpress/asd/">Projects</a>
        </li>
        <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
          <a href="http://localhost/wordpress/blog/">Blog</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
              <a href="http://localhost/wordpress/news-updates/">About</a>
              <button class="dropdown-toggle" aria-expanded="false">
									<span class="dropdown-symbol">+</span>
								</button>
              <ul class="sub-menu">
                <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
                  <a href="http://localhost/wordpress/news-updates/">News Updates</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
  <link rel="stylesheet" type="text/css" href="style.css">
</header>

关于javascript - 悬停时显示下拉菜单 - 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48134566/

上一篇：html - CSS 导航栏悬停未激活

下一篇：jquery - 调整大小时，文章不会停留在其他 sibling 之上

相关文章：

javascript - Math.random() Javascript - 百分比和权重

javascript - 检查对象是否为空且具有未定义的属性

javascript - 数组和JSON之间是否存在混合数据结构？

php - 根据数据库字段创建 HTML 表单

jquery - 如何使用 jQuery 在 HTML 表格的同一行中查找特定文本框？

javascript - 全日历事件的链接

javascript - Bootstrap modal 3 检查按钮是否被点击

c# - 无法从 NULL 读取属性 "Patient"

javascript - jQuery 更改页面 - 但我如何/在哪里更改 "acquire"？

javascript - 如何在我的代码中将文本放在移动菜单的标题栏中？

©2024 IT工具网  联系我们