使用 javascript 显示子菜单

Question

我为WordPress设计了一个菜单如下：

HTML：

 <aside class="menu">
    <ul>
      <li>
          Main
          <ul>
              <li>
                  **** Under the first menu ****
                  <li>
                      Content first
                  </li>
                  <li>
                      Content second
                  </li>
                  <li>
                      Content third
                      <ul>
                          <li>
                              **** Under the second menu ****
                              <li>
                                  Content first
                              </li>
                              <li>
                                  Content second
                              </li>
                              <li>
                                  Content third
                              </li>
                          </li>
                      </ul>
                  </li>
              </li>
          </ul>
      </li>
  </ul>
  <aside>

CSS：

.menu > ul > li > ul {
    display: none;
}

并且使用这个脚本代码，我定义了一个条件，通过点击li，如果里面有ul，就会显示：

$('.menu').find('li').click(function(evt) {
    evt.stopPropagation();
    $(this).children('ul').toggle();
});

这段代码工作正常； 但是当里里面用到其他几个里的时候，我放的条件就不行了，只会显示第一个子菜单。

有没有办法让我的脚本代码正常工作？

我的问题只与脚本代码有关。

Answer 1

您应该将要切换的 ul 内容移动到可点击的 li 中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .menu ul li ul {
        display: none;
      } 
      </style>
  </head>
  <body>
    <div id="app"></div>
    <aside class="menu">
    <ul>
      <li>
          Main
          <ul>
              <li>
                  **** Under the first menu ****
                  <li>
                      Content first
                  </li>
                  <li>
                      Content second
                  </li>
                  <li>
                      Content third
                      <ul>
                          <li>
                              **** Under the second menu ****
                              <li>
                                  Content first
                              </li>
                              <li>
                                  Content second
                              </li>
                              <li>
                                  Content third
                              </li>
                          </li>
                      </ul>
                  </li>
              </li>
          </ul>
      </li>
  </ul>
  <aside>
  </body>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  ></script>
<script >
  $('.menu').find('li').click(function(evt) {
    evt.stopPropagation();
    $(this).children('ul').toggle();
});
</script>
</html>

Answer 2

如果您只想在打开后看到第二级菜单，您需要像这样执行 CSS：

.menu > ul > li > ul {
    display: none;
}

通过这种方式，您将选择元素的直接子元素，更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

但是，如果您还希望在单击时打开第二级菜单，则需要移动<ul>并将其直接放在<li>中，如下所示：

<aside class="menu">

        <ul>
            <li>
                Main
                <ul>
                    <li>
                        **** Under the first menu ****
                        <li>
                            Content first
                        </li>
                        <li>
                            Content second
                        </li>
                        <li>
                            Content third
                        <ul>
                            <li>
                                **** Under the second menu ****
                                <li>
                                    Content first
                                </li>
                                <li>
                                    Content second
                                </li>
                                <li>
                                    Content third
                                </li>
                            </li>
                        </ul>
                        </li>
                    </li>
                </ul>
            </li>
        </ul>
    </aside>

并将您的 CSS 更改为：

   .menu ul > li > ul {
        display: none;
    }

使用 javascript 显示子菜单

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-12-25 22:25:04

解决方案2
0 2022-12-25 16:04:24

使用 javascript 显示子菜单

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-12-25 22:25:04

解决方案2 0 2022-12-25 16:04:24

解决方案1
1 已采纳 2022-12-25 22:25:04

解决方案2
0 2022-12-25 16:04:24