【问题标题】:How to show submenu items on hover on menu item如何在菜单项上悬停时显示子菜单项
【发布时间】:2019-09-18 19:33:28
【问题描述】:

这里有下拉菜单,其中有子菜单结构和类名,与父菜单结构相同。 我试图在父菜单项上悬停时显示子级菜单项,但我只能在第一级菜单上工作,但不能在第二级菜单项上工作。

我在这里做错了什么?

以下是我的示例代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

    .we-mega-menu-submenu{
        position: relative;
        display: none;
    }

</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.we-mega-menu-li.dropdown-menu').mouseover(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"block"
            });
        })

        $('.we-mega-menu-li.dropdown-menu').mouseout(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"none"
            });
        })

    })
</script>

<ul class="nav-tabs">
    <li class="we-mega-menu-li dropdown-menu">
        <a href="#">Menu 1</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    <li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
    <li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
    <li class="we-mega-menu-li dropdown-menu">
    <a href="3">Menu 4</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu2</li>
                            <li>submenu3</li>
                            <li>submenu4</li>
                            <li>submenu5</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    </li>
    <li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>

</body>
</html>

顺便说一下,这里是codepen URL

https://codepen.io/Chandanay/pen/YzKJNEE

【问题讨论】:

    标签: jquery html css


    【解决方案1】:

    您需要将类 "we-mega-menu-submenu" 的元素放入类 "dropdown-menu"

    的元素中

    $(document).ready(function () {
         $('.we-mega-menu-li.dropdown-menu').mouseover(function () {
             $(this).find('div.we-mega-menu-submenu:first').css({
                 "display": "block"
             });
         })
         $('.we-mega-menu-li.dropdown-menu').mouseout(function () {
             $(this).find('div.we-mega-menu-submenu:first').css({
                 "display": "none"
             });
         })
     })
    .we-mega-menu-submenu{
                   position: relative;
                   display: none;
               }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <ul class="nav-tabs">
               <li class="we-mega-menu-li dropdown-menu">
                   <a href="#">Menu 1</a>
                   <div class="we-mega-menu-submenu">
                       <ul class="nav-tabs">
                           <li class="we-mega-menu-li">submenu1</li>
                           <li class="we-mega-menu-li dropdown-menu">submenu2
                               <div class="we-mega-menu-submenu">
                                   <ul class="nav-tabs">
                                       <li>submenu1</li>
                                       <li>submenu1</li>
                                       <li>submenu1</li>
                                       <li>submenu1</li>
                                       <li>submenu1</li>
                                   </ul>
                               </div>
                           </li>
                           <li class="we-mega-menu-li">submenu3</li>
                           <li class="we-mega-menu-li">submenu4</li>
                           <li class="we-mega-menu-li">submenu5</li>
                       </ul>
                   </div>
               <li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
               <li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
               <li class="we-mega-menu-li dropdown-menu">
                   <a href="3">Menu 4</a>
                   <div class="we-mega-menu-submenu">
                       <ul class="nav-tabs">
                           <li class="we-mega-menu-li">submenu1</li>
                           <li class="we-mega-menu-li dropdown-menu">submenu2
                               <div class="we-mega-menu-submenu">
                                   <ul class="nav-tabs">
                                       <li>submenu1</li>
                                       <li>submenu2</li>
                                       <li>submenu3</li>
                                       <li>submenu4</li>
                                       <li>submenu5</li>
                                   </ul>
                               </div>
                           </li>
                           <li class="we-mega-menu-li">submenu3</li>
                           <li class="we-mega-menu-li">submenu4</li>
                           <li class="we-mega-menu-li">submenu5</li>
                       </ul>
                   </div>
               </li>
               <li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
           </ul>

    【讨论】:

      【解决方案2】:

      您忘记将列表项和.dropdown-menu 类添加到第二、第三和第五个菜单
      这是更新的代码。

      <!DOCTYPE html>
      <html>
      <head>
          <title></title>
      </head>
      <body>
      <style type="text/css">
      
          .we-mega-menu-submenu{
              position: relative;
              display: none;
          }
      
      </style>
      
      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
      <script type="text/javascript">
          $(document).ready(function(){
              $('.we-mega-menu-li.dropdown-menu').mouseover(function(){
                  $(this).find('div.we-mega-menu-submenu:first').css({
                      "display":"block"
                  });
              })
      
              $('.we-mega-menu-li.dropdown-menu').mouseout(function(){
                  $(this).find('div.we-mega-menu-submenu:first').css({
                      "display":"none"
                  });
              })
      
          })
      </script>
      
      <ul class="nav-tabs">
          <li class="we-mega-menu-li dropdown-menu">
              <a href="#">Menu 1</a>
              <div class="we-mega-menu-submenu">
                  <ul class="nav-tabs">
                      <li class="we-mega-menu-li">submenu1</li>
                      <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                          <div class="we-mega-menu-submenu">
                              <ul class="nav-tabs">
                                  <li>submenu1</li>
                                  <li>submenu1</li>
                                  <li>submenu1</li>
                                  <li>submenu1</li>
                                  <li>submenu1</li>
                              </ul>
                          </div>
                      <li class="we-mega-menu-li">submenu3</li>
                      <li class="we-mega-menu-li">submenu4</li>
                      <li class="we-mega-menu-li">submenu5</li>
                  </ul>
              </div>
          <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 2</a>
            <div class="we-mega-menu-submenu">
                <ul class="nav-tabs">
                    <li class="we-mega-menu-li">submenu1</li>
                    <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                        <div class="we-mega-menu-submenu">
                            <ul class="nav-tabs">
                                <li>submenu1</li>
                                <li>submenu2</li>
                                <li>submenu3</li>
                                <li>submenu4</li>
                                <li>submenu5</li>
                            </ul>
                        </div>
                    <li class="we-mega-menu-li">submenu3</li>
                    <li class="we-mega-menu-li">submenu4</li>
                    <li class="we-mega-menu-li">submenu5</li>
                </ul>
            </div>
          </li>
          <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 3</a>
            <div class="we-mega-menu-submenu">
                <ul class="nav-tabs">
                    <li class="we-mega-menu-li">submenu1</li>
                    <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                        <div class="we-mega-menu-submenu">
                            <ul class="nav-tabs">
                                <li>submenu1</li>
                                <li>submenu2</li>
                                <li>submenu3</li>
                                <li>submenu4</li>
                                <li>submenu5</li>
                            </ul>
                        </div>
                    <li class="we-mega-menu-li">submenu3</li>
                    <li class="we-mega-menu-li">submenu4</li>
                    <li class="we-mega-menu-li">submenu5</li>
                </ul>
            </div>
          </li>
          <li class="we-mega-menu-li dropdown-menu">
          <a href="3">Menu 4</a>
              <div class="we-mega-menu-submenu">
                  <ul class="nav-tabs">
                      <li class="we-mega-menu-li">submenu1</li>
                      <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                          <div class="we-mega-menu-submenu">
                              <ul class="nav-tabs">
                                  <li>submenu1</li>
                                  <li>submenu2</li>
                                  <li>submenu3</li>
                                  <li>submenu4</li>
                                  <li>submenu5</li>
                              </ul>
                          </div>
                      <li class="we-mega-menu-li">submenu3</li>
                      <li class="we-mega-menu-li">submenu4</li>
                      <li class="we-mega-menu-li">submenu5</li>
                  </ul>
              </div>
          </li>
          <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 5</a>
            <div class="we-mega-menu-submenu">
                <ul class="nav-tabs">
                    <li class="we-mega-menu-li">submenu1</li>
                    <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                        <div class="we-mega-menu-submenu">
                            <ul class="nav-tabs">
                                <li>submenu1</li>
                                <li>submenu2</li>
                                <li>submenu3</li>
                                <li>submenu4</li>
                                <li>submenu5</li>
                            </ul>
                        </div>
                    <li class="we-mega-menu-li">submenu3</li>
                    <li class="we-mega-menu-li">submenu4</li>
                    <li class="we-mega-menu-li">submenu5</li>
                </ul>
            </div>
          </li>
      </ul>
      
      </body>
      </html>
      

      【讨论】:

        猜你喜欢
        • 2019-10-30
        • 1970-01-01
        • 1970-01-01
        • 2020-07-15
        • 2013-07-05
        • 1970-01-01
        • 1970-01-01
        • 2014-04-01
        • 1970-01-01
        相关资源
        最近更新 更多