基于 jQuery 切换的子菜单切换所有子菜单 [英] jQuery toggle based submenu toggles all submenus

查看：49
本文介绍了基于 jQuery 切换的子菜单切换所有子菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 jQuery/JS 的新手.以下是我对带有子菜单的基于 jQuery 的菜单的尝试.我不知道该怎么做才能解决这个问题，也不知道该从哪里开始.

$(document).ready(function() {$(".toggle-btn").click(function() {$(this).toggleClass("active");$(".parent-nav").toggleClass("in");});$("#mainnav .child-nav > a").click(function() {$(this).toggleClass("active");$(".submenu").toggleClass("in");返回假；});});

body {填充:20px 50px；}.sr-only {位置:绝对；宽度:1px；高度:1px；填充:0；溢出:隐藏；剪辑: rect(0, 0, 0, 0);空白:nowrap；剪辑路径:插入(50％)；边框:0；}#mainnav {位置:相对；z-索引:1；浮动:对；填充:1.3rem 1rem；填充右:0;}#mainnav li:last-of-type .submenu {左:自动；右:0；}#mainnav .toggle-btn {显示:块；背景:#fff;边界:无；宽度:42px；高度:42px；填充:0；光标:指针；}#mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus {背景:#e9ecef；}#mainnav .toggle-btn:active, #mainnav .toggle-btn.active {背景:#20ac62；}#mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar {背景:#fff;}#mainnav .toggle-btn .bar {显示:块；背景:#000；宽度:24px；高度:3px；边距:0 自动；}#mainnav .toggle-btn .bar + .bar {边距顶部:5px；}#mainnav .parent-nav,#mainnav .submenu {边距:0；填充:0；列表样式:无；}#mainnav .parent-nav {显示:弹性；flex-wrap: 包裹;对齐内容:间隔；可见性:隐藏；不透明度:0；指针事件:无；背景:#f8f9fa；位置:绝对；顶部:100%；右:0；宽度:计算(1110px - 120px)；过渡:全0.3s；}@media(最大宽度:1199px){#mainnav .parent-nav {宽度:220px；显示:块；} }#mainnav .parent-nav.in {可见性:可见；不透明度:1；指针事件:自动；}#mainnav .parent-nav a {位置:相对；显示:块；填充:0.875rem 1.25rem；字体大小:0.875rem；字体粗细:700；颜色:#212529；行高:1.5rem；文本转换:大写；文字装饰:无；}#mainnav .parent-nav a:before {内容: '';位置:绝对；左:0；底部:0；右:0；高度:4px；背景:#20ac62；不透明度:0；过渡:全0.15s；}#mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before {不透明度:1；}#mainnav .child-nav {位置:相对；}#mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu {显示:块；}#mainnav .child-nav a.active {背景:#20ac62；}#mainnav .child-nav .caret {左边距:4px；}#mainnav .child-nav .submenu {位置:绝对；顶部:100%；左:0；z-索引:1；显示:无；背景:#fff;最小宽度:220px；}#mainnav .child-nav .submenu.in {最小宽度:0；位置:相对；显示:块；}#mainnav .child-nav .submenu a {填充:0.5rem 1rem；文本转换:无；字体粗细:400；}#mainnav .child-nav .submenu a:before {显示:无；}#mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus {背景:#e9ecef；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="mainnav"><button class="toggle-btn"><span class="sr-only">菜单</span><span class="bar"></span><span class="bar"></span><span class="bar"></span><ul class="parent-nav"><li><a href="">首页</a></li><li class="child-nav"><a href="">属性<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">出售</a></li><li><a href="">出租</a></li><li><a href="">列出您的房产</a></li><li><a href="">服务</a></li><li><a href="">联系我们</a></li><li class="child-nav"><a href="">公司集团<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">公司投资</a></li><li><a href="">公司酒店</a></li><li><a href="">公司开发商</a></li><li><a href="">公司实习</a></li>

正如你在上面的代码片段中看到的，有一个相当大的问题.点击任一子菜单将在两个 .submenu 上触发 .in 类，这显然不是预期的行为.而且我也不知道在某个视口宽度之后如何触发这个脚本.

我该如何解决这个问题?

解决方案

我已经修改了您的 javascript 以包含 jQuery 函数 .next() 以找到 .submenu> 出现在您点击的链接之后，而不是选择所有 .submenu.

$(document).ready(function() {$(".toggle-btn").click(function() {$(this).toggleClass("active");$(".parent-nav").toggleClass("in");});$("#mainnav .child-nav > a").click(function() {$(this).toggleClass("active");$(this).next(".submenu").toggleClass("in");返回假；});});

body {填充:20px 50px；}.sr-only {位置:绝对；宽度:1px；高度:1px；填充:0；溢出:隐藏；剪辑: rect(0, 0, 0, 0);空白:nowrap；剪辑路径:插入(50％)；边框:0；}#mainnav {位置:相对；z-索引:1；浮动:对；填充:1.3rem 1rem；填充右:0;}#mainnav li:last-of-type .submenu {左:自动；右:0；}#mainnav .toggle-btn {显示:块；背景:#fff;边界:无；宽度:42px；高度:42px；填充:0；光标:指针；}#mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus {背景:#e9ecef；}#mainnav .toggle-btn:active, #mainnav .toggle-btn.active {背景:#20ac62；}#mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar {背景:#fff;}#mainnav .toggle-btn .bar {显示:块；背景:#000；宽度:24px；高度:3px；边距:0 自动；}#mainnav .toggle-btn .bar + .bar {边距顶部:5px；}#mainnav .parent-nav,#mainnav .submenu {边距:0；填充:0；列表样式:无；}#mainnav .parent-nav {显示:弹性；flex-wrap: 包裹;对齐内容:间隔；可见性:隐藏；不透明度:0；指针事件:无；背景:#f8f9fa；位置:绝对；顶部:100%；右:0；宽度:计算(1110px - 120px)；过渡:全0.3s；}@media(最大宽度:1199px){#mainnav .parent-nav {宽度:220px；显示:块；} }#mainnav .parent-nav.in {可见性:可见；不透明度:1；指针事件:自动；}#mainnav .parent-nav a {位置:相对；显示:块；填充:0.875rem 1.25rem；字体大小:0.875rem；字体粗细:700；颜色:#212529；行高:1.5rem；文本转换:大写；文字装饰:无；}#mainnav .parent-nav a:before {内容: '';位置:绝对；左:0；底部:0；右:0；高度:4px；背景:#20ac62；不透明度:0；过渡:全0.15s；}#mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before {不透明度:1；}#mainnav .child-nav {位置:相对；}#mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu {显示:块；}#mainnav .child-nav a.active {背景:#20ac62；}#mainnav .child-nav .caret {左边距:4px；}#mainnav .child-nav .submenu {位置:绝对；顶部:100%；左:0；z-索引:1；显示:无；背景:#fff;最小宽度:220px；}#mainnav .child-nav .submenu.in {最小宽度:0；位置:相对；显示:块；}#mainnav .child-nav .submenu a {填充:0.5rem 1rem；文本转换:无；字体粗细:400；}#mainnav .child-nav .submenu a:before {显示:无；}#mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus {背景:#e9ecef；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="mainnav"><button class="toggle-btn"><span class="sr-only">菜单</span><span class="bar"></span><span class="bar"></span><span class="bar"></span><ul class="parent-nav"><li><a href="">首页</a></li><li class="child-nav"><a href="">属性<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">出售</a></li><li><a href="">出租</a></li><li><a href="">列出您的房产</a></li><li><a href="">服务</a></li><li><a href="">联系我们</a></li><li class="child-nav"><a href="">公司集团<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">公司投资</a></li><li><a href="">公司酒店</a></li><li><a href="">公司开发商</a></li><li><a href="">公司实习</a></li>

I'm new to jQuery/JS. The following is my attempt on a jQuery based menu with submenus. I'm not sure what to do here to fix this or where to go from here.

$(document).ready(function() {
  $(".toggle-btn").click(function() {
    $(this).toggleClass("active");
    $(".parent-nav").toggleClass("in");
  });
  $("#mainnav .child-nav > a").click(function() {
    $(this).toggleClass("active");
    $(".submenu").toggleClass("in");
    return false;
  });
});

body {
  padding: 20px 50px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0; }


#mainnav {
  position: relative;
  z-index: 1;
  float: right;
  padding: 1.3rem 1rem;
  padding-right: 0; }
  #mainnav li:last-of-type .submenu {
    left: auto;
    right: 0; }
  #mainnav .toggle-btn {
    display: block;
    background: #fff;
    border: none;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer; }
    #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus {
      background: #e9ecef; }
    #mainnav .toggle-btn:active, #mainnav .toggle-btn.active {
      background: #20ac62; }
      #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar {
        background: #fff; }
    #mainnav .toggle-btn .bar {
      display: block;
      background: #000;
      width: 24px;
      height: 3px;
      margin: 0 auto; }
      #mainnav .toggle-btn .bar + .bar {
        margin-top: 5px; }
  #mainnav .parent-nav,
  #mainnav .submenu {
    margin: 0;
    padding: 0;
    list-style: none; }
  #mainnav .parent-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #f8f9fa;
    position: absolute;
    top: 100%;
    right: 0;
    width: calc(1110px - 120px);
    transition: all 0.3s; }
    @media (max-width: 1199px) {
      #mainnav .parent-nav {
        width: 220px;
        display: block; } }
    #mainnav .parent-nav.in {
      visibility: visible;
      opacity: 1;
      pointer-events: auto; }
    #mainnav .parent-nav a {
      position: relative;
      display: block;
      padding: 0.875rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: #212529;
      line-height: 1.5rem;
      text-transform: uppercase;
      text-decoration: none; }
      #mainnav .parent-nav a:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 4px;
        background: #20ac62;
        opacity: 0;
        transition: all 0.15s; }
      #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before {
        opacity: 1; }
  #mainnav .child-nav {
    position: relative; }
    #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu {
      display: block; }
    #mainnav .child-nav a.active {
      background: #20ac62; }
    #mainnav .child-nav .caret {
      margin-left: 4px; }
    #mainnav .child-nav .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
      display: none;
      background: #fff;
      min-width: 220px; }
      #mainnav .child-nav .submenu.in {
        min-width: 0;
        position: relative;
        display: block; }
      #mainnav .child-nav .submenu a {
        padding: 0.5rem 1rem;
        text-transform: none;
        font-weight: 400; }
        #mainnav .child-nav .submenu a:before {
          display: none; }
        #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus {
          background: #e9ecef; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="mainnav">
  <button class="toggle-btn">
    <span class="sr-only">Menu</span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <ul class="parent-nav">
    <li><a href="">Home</a></li>
    <li class="child-nav">
      <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a>
      <ul class="submenu">
        <li><a href="">For Sale</a></li>
        <li><a href="">For Rent</a></li>
        <li><a href="">List Your Property</a></li>
      </ul>
    </li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact Us</a></li>
    <li class="child-nav">
      <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a>
      <ul class="submenu">
        <li><a href="">Company Investments</a></li>
        <li><a href="">Company Hotels</a></li>
        <li><a href="">Company Developers</a></li>
        <li><a href="">Company Internship</a></li>
      </ul>
    </li>
  </ul>
</div>

As you can see in the above snippet, there are a pretty big problem. Tapping either of the sub-menus will trigger class .in on both of the .submenus, which obviously isn't the intended behavior. And I also don't know how to trigger this script after a certain viewport width.

How do I fix this?

解决方案

I've modified your javascript to include the jQuery function .next() to find the .submenu that comes after the link you clicked on rather than selecting all .submenus.

$(document).ready(function() {
  $(".toggle-btn").click(function() {
    $(this).toggleClass("active");
    $(".parent-nav").toggleClass("in");
  });
  $("#mainnav .child-nav > a").click(function() {
    $(this).toggleClass("active");
   $(this).next(".submenu").toggleClass("in");
    return false;
  });
});

body {
  padding: 20px 50px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0; }


#mainnav {
  position: relative;
  z-index: 1;
  float: right;
  padding: 1.3rem 1rem;
  padding-right: 0; }
  #mainnav li:last-of-type .submenu {
    left: auto;
    right: 0; }
  #mainnav .toggle-btn {
    display: block;
    background: #fff;
    border: none;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer; }
    #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus {
      background: #e9ecef; }
    #mainnav .toggle-btn:active, #mainnav .toggle-btn.active {
      background: #20ac62; }
      #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar {
        background: #fff; }
    #mainnav .toggle-btn .bar {
      display: block;
      background: #000;
      width: 24px;
      height: 3px;
      margin: 0 auto; }
      #mainnav .toggle-btn .bar + .bar {
        margin-top: 5px; }
  #mainnav .parent-nav,
  #mainnav .submenu {
    margin: 0;
    padding: 0;
    list-style: none; }
  #mainnav .parent-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #f8f9fa;
    position: absolute;
    top: 100%;
    right: 0;
    width: calc(1110px - 120px);
    transition: all 0.3s; }
    @media (max-width: 1199px) {
      #mainnav .parent-nav {
        width: 220px;
        display: block; } }
    #mainnav .parent-nav.in {
      visibility: visible;
      opacity: 1;
      pointer-events: auto; }
    #mainnav .parent-nav a {
      position: relative;
      display: block;
      padding: 0.875rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: #212529;
      line-height: 1.5rem;
      text-transform: uppercase;
      text-decoration: none; }
      #mainnav .parent-nav a:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 4px;
        background: #20ac62;
        opacity: 0;
        transition: all 0.15s; }
      #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before {
        opacity: 1; }
  #mainnav .child-nav {
    position: relative; }
    #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu {
      display: block; }
    #mainnav .child-nav a.active {
      background: #20ac62; }
    #mainnav .child-nav .caret {
      margin-left: 4px; }
    #mainnav .child-nav .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
      display: none;
      background: #fff;
      min-width: 220px; }
      #mainnav .child-nav .submenu.in {
        min-width: 0;
        position: relative;
        display: block; }
      #mainnav .child-nav .submenu a {
        padding: 0.5rem 1rem;
        text-transform: none;
        font-weight: 400; }
        #mainnav .child-nav .submenu a:before {
          display: none; }
        #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus {
          background: #e9ecef; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="mainnav">
  <button class="toggle-btn">
    <span class="sr-only">Menu</span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <ul class="parent-nav">
    <li><a href="">Home</a></li>
    <li class="child-nav">
      <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a>
      <ul class="submenu">
        <li><a href="">For Sale</a></li>
        <li><a href="">For Rent</a></li>
        <li><a href="">List Your Property</a></li>
      </ul>
    </li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact Us</a></li>
    <li class="child-nav">
      <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a>
      <ul class="submenu">
        <li><a href="">Company Investments</a></li>
        <li><a href="">Company Hotels</a></li>
        <li><a href="">Company Developers</a></li>
        <li><a href="">Company Internship</a></li>
      </ul>
    </li>
  </ul>
</div>

这篇关于基于 jQuery 切换的子菜单切换所有子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆