使用 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