专业菜单使用JavaScript和jQuery（最后部分）

huangapple
go评论91阅读模式
英文:

Professional menu with JavaScript and jQuery (The last part)

问题

在我的以前的问题中，借助Michael M.的帮助，我解决了我的网站菜单的所有不足之处。

但在将菜单转移到我的网站后，我意识到我的菜单不打开任何链接，所有菜单和子菜单选项都只处于显示模式。

我从与删除菜单下的链接相关的脚本中删除了以下代码，但它仍然没有帮助：

  1. sub_menu.stopPropagation();

以下是您提供的代码的翻译。如果您需要更多的帮助，请告诉我：

  1. let icon = document.querySelector(".icon_menu");
  2. let nav = document.querySelector(".main_menu");
  4. $('.back').hide();
  5. $('.back').click(function() {
  6.   if ($(this).is(':hidden')) return;
  7.   $(this).toggle();
  9.   icon.classList = "bi bi-grid-fill icon_menu";
  10.   icon.style.left = "2%";
  11.   icon.style.color = "#a66fff";
  12.   icon.style.fontSize = "40px";
  14.   nav.style.left = '-300px';
  15. });
  17. icon.addEventListener("click", function() {
  18.   if (this.classList.contains("bi-grid-fill")) {
  19.     this.classList = "bi bi-x-circle-fill icon_menu";
  20.     icon.style.left = "21%";
  21.     icon.style.color = "#ff6f6f";
  22.     icon.style.fontSize = "30px";
  24.     nav.style.left = 0;
  25.   } else {
  26.     this.classList = "bi bi-grid-fill icon_menu";
  27.     icon.style left = "2%";
  28.     icon.style color = "#a66fff";
  29.     icon.style fontSize = "40px";
  31.     nav.style.left = "-300px";
  32.   }
  33.   $('.back').toggle();
  34. });
  36. $('.main_menu li ul').each(function() {
  37.   $(this).parent().addClass('submenu');
  38. });
  40. $('.submenu').click(function(event) {
  41.   if ($(event.target).is($(this).find('ul a'))) { return; }
  42.   
  43.   event.preventDefault();
  44.   $(this).children('ul').slideToggle();
  45.   $(this).toggleClass('open');
  46. });
  48. /* CSS 样式部分不需要翻译，保持原样 */
  50. /* HTML 部分不需要翻译，保持原样 */

你感谢了编号为Steve（76484）的人完成了你的代码。

这段代码在HTML模式下完全正常，但当我将这段代码添加到WordPress时，出现了一个新问题。

当我将菜单引入WordPress时，只能添加一个子菜单。添加第二个子菜单并单击它后，所有子菜单将关闭，不会显示任何子菜单。

我已经将菜单代码转化为WordPress代码：

  1. <section>
  2.   <nav id="nav">
  3.     <span class="fas fa-bars icon_menu"></span>
  4.     <aside class="main_menu">
  5.       <?php
  6.       if (has_nav_menu('top_menu')) {
  7.         wp_nav_menu(array(
  8.           'theme_location' => 'top_menu',
  9.           'menu_class' => 'menu',
  10.           'container' => false
  11.         ));
  12.       }
  13.       ?>
  14.     </aside>
  15.   </nav>
  16. </section>
  17. <div class="back"></div>

我添加到模板function文件的代码如下：

  1. if (!function_exists('top_navigation_menus')) {
  2.   function top_navigation_menus() {
  3.     $locations = array(
  4.       'top_menu' => __('站点菜单', 'text_domain'),
  5.     );
  6.     register_nav_menus($locations);
  7.   }
  8.   add_action('init', 'top_navigation_menus');
  9. }

我没有更改样式，它们与上面的样式相同。

英文:

In my previous questions and with the help of Michael M., I fixed all the shortcomings of my site's menu.

But after transferring the menu to my site, I realized that my menu does not open any links and all menu and sub-menu options are only in display mode.

I deleted the following code from the scripts, which was related to deleting the link under the menu, but it still didn't help:

  1.    sub_menu.stopPropagation();

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let icon = document.querySelector(&quot;.icon_menu&quot;);
  2. let nav = document.querySelector(&quot;.main_menu&quot;);
  3. $(&#39;.back&#39;).hide();
  4. $(&#39;.back&#39;).click(function() {
  5. if ($(this).is(&#39;:hidden&#39;)) return;
  6. $(this).toggle();
  7. icon.classList = &quot;bi bi-grid-fill icon_menu&quot;;
  8. icon.style.left = &quot;2%&quot;;
  9. icon.style.color = &quot;#a66fff&quot;;
  10. icon.style.fontSize = &quot;40px&quot;;
  11. nav.style.left = &#39;-300px&#39;;
  12. });
  13. icon.addEventListener(&quot;click&quot;, function() {
  14. if (this.classList.contains(&quot;bi-grid-fill&quot;)) {
  15. this.classList = &quot;bi bi-x-circle-fill icon_menu&quot;;
  16. icon.style.left = &quot;21%&quot;;
  17. icon.style.color = &quot;#ff6f6f&quot;;
  18. icon.style.fontSize = &quot;30px&quot;;
  19. nav.style.left = 0;
  20. } else {
  21. this.classList = &quot;bi bi-grid-fill icon_menu&quot;;
  22. icon.style.left = &quot;2%&quot;;
  23. icon.style.color = &quot;#a66fff&quot;;
  24. icon.style.fontSize = &quot;40px&quot;;
  25. nav.style.left = &quot;-300px&quot;;
  26. }
  27. $(&#39;.back&#39;).toggle();
  28. });
  29. $(&#39;.main_menu li ul&#39;).each(function() {
  30. $(this).parent().addClass(&#39;submenu&#39;)
  31. });
  32. $(&#39;.submenu&#39;).click(function(event) {
  33. if ($(event.target).is($(this).find(&#39;ul a&#39;))) { return; }
  34. event.preventDefault();
  35. $(this).children(&#39;ul&#39;).slideToggle();
  36. $(this).toggleClass(&#39;open&#39;);
  37. });

<!-- language: lang-css -->

  1. .main_menu {
  2. position: absolute;
  3. top: 0;
  4. left: -300px;
  5. bottom: 0;
  6. z-index: 999;
  7. background: #eee;
  8. padding-right: 2rem;
  9. transition: all 1s ease;
  10. }
  11. .icon_menu {
  12. position: fixed;
  13. top: 10%;
  14. left: 2%;
  15. font-size: 40px;
  16. color: #a66fff;
  17. cursor: pointer;
  18. z-index: 99999;
  19. transition: all 1.1s ease;
  20. }
  21. .main_menu ul {
  22. list-style: none;
  23. line-height: 60px;
  24. font-size: 35px;
  25. }
  26. .main_menu ul li a {
  27. color: #000000;
  28. text-decoration: none;
  29. padding-right: 15px;
  30. padding-left: 40px;
  31. margin-left: -60px;
  32. margin-bottom: 10px;
  33. }
  34. .back {
  35. width: 100%;
  36. height: 100%;
  37. position: fixed;
  38. z-index: 9 !important;
  39. top: 0;
  40. left: 0;
  41. right: 0;
  42. bottom: 0;
  43. background: #00000056;
  44. }
  45. .main_menu ul li ul {
  46. display: none;
  47. }
  48. .main_menu .submenu&gt;a::after {
  49. content: &#39; → &#39;;
  50. }
  51. .main_menu .open&gt;a::after {
  52. content: &#39; ↓ &#39; !important;
  53. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot; /&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;section&gt;
  4. &lt;nav id=&quot;nav&quot;&gt;
  5. &lt;span class=&quot;bi bi-grid-fill icon_menu&quot; style=&quot;right: 46%; color: rgb(255, 255, 255); font-size: 80px;&quot;&gt;&lt;/span&gt;
  6. &lt;aside class=&quot;main_menu&quot; style=&quot;right: 0px;&quot;&gt;
  7. &lt;ul id=&quot;menu-menu-2&quot; class=&quot;menu&quot;&gt;
  8. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-48&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span
  9. class=&quot;dashicons dashicons-admin-home after-menu-image-icons&quot;&gt;&lt;/span&gt;&lt;span
  10. class=&quot;menu-image-title-after menu-image-title&quot;&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  11. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-49 submenu&quot;&gt;
  12. &lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;dashicons dashicons-welcome-learn-more after-menu-image-icons&quot;&gt;&lt;/span&gt;&lt;span
  13. class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;
  14. &lt;ul class=&quot;sub-menu&quot;&gt;
  15. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-78&quot;&gt;&lt;a href=&quot;#&quot;
  16. class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  17. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Music-114.ico&quot;
  18. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot; width=&quot;36&quot;
  19. height=&quot;36&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  20. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-82&quot;&gt;&lt;a href=&quot;#&quot;
  21. class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  22. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Hardware-Devices-316.ico&quot;
  23. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot; width=&quot;16&quot;
  24. height=&quot;16&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  25. &lt;li
  26. class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-50 submenu&quot;&gt;
  27. &lt;a href=&quot;#&quot; class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  28. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Music-148.ico&quot;
  29. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot; width=&quot;36&quot;
  30. height=&quot;36&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;
  31. &lt;ul class=&quot;sub-menu&quot;&gt;
  32. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-77&quot;&gt;&lt;a href=&quot;#&quot;
  33. class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  34. src=&quot;https://localhost/site/wp-content/uploads/2023/01/button-yellow.ico&quot;
  35. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot; width=&quot;16&quot;
  36. height=&quot;16&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  37. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-169&quot;&gt;&lt;a href=&quot;#&quot;&gt;Test
  38. text&lt;/a&gt;&lt;/li&gt;
  39. &lt;li
  40. class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-170 submenu&quot;&gt;
  41. &lt;a href=&quot;#&quot;&gt;Test text&lt;/a&gt;
  42. &lt;ul class=&quot;sub-menu&quot;&gt;
  43. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-80&quot;&gt;&lt;a href=&quot;#&quot;
  44. class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  45. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Star-27.ico&quot;
  46. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot; width=&quot;36&quot;
  47. height=&quot;36&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  48. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-168&quot;&gt;&lt;a href=&quot;#&quot;&gt;Test
  49. text&lt;/a&gt;&lt;/li&gt;
  50. &lt;li
  51. class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-167 submenu&quot;&gt;
  52. &lt;a href=&quot;#&quot;&gt;Test text&lt;/a&gt;
  53. &lt;ul class=&quot;sub-menu&quot;&gt;
  54. &lt;li
  55. class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-166 submenu&quot;&gt;
  56. &lt;a href=&quot;#&quot;&gt;Test text&lt;/a&gt;
  57. &lt;ul class=&quot;sub-menu&quot;&gt;
  58. &lt;li
  59. class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-52 submenu&quot;&gt;
  60. &lt;a href=&quot;#&quot; class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  61. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Hardware-Devices-316.ico&quot;
  62. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot;
  63. width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test
  64. text&lt;/span&gt;&lt;/a&gt;
  65. &lt;ul class=&quot;sub-menu&quot;&gt;
  66. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-79&quot;&gt;&lt;a
  67. href=&quot;#&quot; class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  68. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Firefox-4.ico&quot;
  69. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot;
  70. width=&quot;36&quot; height=&quot;36&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test
  71. text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  72. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-81&quot;&gt;&lt;a
  73. href=&quot;#&quot; class=&quot;menu-image-title-after menu-image-not-hovered&quot;&gt;&lt;img
  74. src=&quot;https://localhost/site/wp-content/uploads/2023/01/Music-161.ico&quot;
  75. class=&quot;menu-image menu-image-title-after&quot; alt=&quot;&quot; decoding=&quot;async&quot; loading=&quot;lazy&quot;
  76. width=&quot;36&quot; height=&quot;36&quot;&gt;&lt;span class=&quot;menu-image-title-after menu-image-title&quot;&gt;Test
  77. text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  78. &lt;li class=&quot;menu-item menu-item-type-custom menu-item-object-custom menu-item-163&quot;&gt;&lt;a
  79. href=&quot;#&quot;&gt;Test text&lt;/a&gt;&lt;/li&gt;
  80. &lt;/ul&gt;
  81. &lt;/li&gt;
  82. &lt;/ul&gt;
  83. &lt;/li&gt;
  84. &lt;/ul&gt;
  85. &lt;/li&gt;
  86. &lt;/ul&gt;
  87. &lt;/li&gt;
  88. &lt;/ul&gt;
  89. &lt;/li&gt;
  90. &lt;/ul&gt;
  91. &lt;/li&gt;
  92. &lt;/ul&gt;
  93. &lt;/aside&gt;
  94. &lt;/nav&gt;
  95. &lt;/section&gt;

<!-- end snippet -->

Many thanks to Steve(76484) for completing my code.

This code works perfectly fine in HTML mode, but when I add this code to WordPress, a new problem occurs.

When I introduce the menu to WordPress, only one sub-menu can be added to it. By adding the second sub-menu and clicking on it, all the sub-menus will be closed and no sub-menu will be displayed.

The menu code that I converted to WordPress code:

  1.  &lt;section&gt;
  2. &lt;nav id=&quot;nav&quot;&gt;
  3. &lt;span class=&quot;fas fa-bars icon_menu&quot;&gt;&lt;/span&gt;
  4. &lt;aside class=&quot;main_menu&quot;&gt;
  5. &lt;?php
  6. if ( has_nav_menu( &#39;top_menu&#39; ) ) {
  7. wp_nav_menu( array(
  8. &#39;theme_location&#39; =&gt; &#39;top_menu&#39;,
  9. &#39;menu_class&#39; =&gt; &#39;menu&#39;,
  10. &#39;container&#39; =&gt; false
  11. ) );
  12. }
  13. ?&gt;
  14. &lt;/aside&gt;
  15. &lt;/nav&gt;
  16. &lt;/section&gt;
  17. &lt;div class=&quot;back&quot;&gt;&lt;/div&gt;

The code I added to my template function file:

  1. if ( !function_exists( &#39;top_navigation_menus&#39; ) ) {
  2. function top_navigation_menus() {
  3. $locations = array(
  4. &#39;top_menu&#39; =&gt; __( &#39;Site menu&#39;, &#39;text_domain&#39; ),
  5. );
  6. register_nav_menus( $locations );
  7. }
  8. add_action( &#39;init&#39;, &#39;top_navigation_menus&#39; );
  9. }

I did not change the styles and they are the same as the styles above.

答案1

得分: 2

我不确定你是否需要在你的.submenu点击处理程序中使用.stopPropagation()或.preventDefault()调用。

我建议在该处理程序中添加一个检查，检查点击的target是否是<ul>内的<a>，如果是，则不执行函数体的其余部分，也就是不打开/关闭子菜单。

更新

为了防止li.submenu > a的点击跟随href，你需要重新添加event.preventDefault()。下面的代码片段已经更新。

  1. let icon = document.querySelector(".icon_menu");
  2. let nav = document.querySelector(".main_menu");
  4. $('.back').hide();
  5. $('.back').click(function() {
  6.   if ($(this).is(':hidden')) return;
  7.   $(this).toggle();
  9.   icon.classList = "bi bi-grid-fill icon_menu";
  10.   icon.style.left = "2%";
  11.   icon.style.color = "#a66fff";
  12.   icon.style.fontSize = "40px";
  14.   nav.style.left = '-300px';
  15. });
  17. icon.addEventListener("click", function() {
  18.   if (this.classList.contains("bi-grid-fill")) {
  19.     this.classList = "bi bi-x-circle-fill icon_menu";
  20.     icon.style.left = "21%";
  21.     icon.style.color = "#ff6f6f";
  22.     icon.style.fontSize = "30px";
  24.     nav.style.left = 0;
  25.   } else {
  26.     this.classList = "bi bi-grid-fill icon_menu";
  27.     icon.style left = "2%";
  28.     icon.style color = "#a66fff";
  29.     icon.style fontSize = "40px";
  31.     nav.style left = "-300px";
  32.   }
  33.   $('.back').toggle();
  34. });
  36. $('.main_menu li ul').each(function() {
  37.   $(this).parent().addClass('submenu')
  38. });
  40. $('.submenu').click(function(event) {
  41.   if ($(event.target).is($(this).find('ul a'))) { return; }
  42.   
  43.   event.preventDefault();
  44.   $(this).children('ul').slideToggle();
  45.   $(this).toggleClass('open');
  46. });

请注意，这是关于如何更新你的代码以包括event.preventDefault()的说明。

另一个更新

我们可以通过明确地定位每个li.submenu中的第一个<a>来简化所有这些。我们可以用以下代码替换.submenu的点击处理程序：

  1. $('li.submenu > a').click(function(event) {
  2.   const $submenu = $(this).parent();
  3.   
  4.   $submenu.children('ul').slideToggle();
  5.   $submenu.toggleClass('open');
  6.   event.preventDefault();
  7. });

在这里可以看到示例fiddle。

英文:

I am not sure that you need the .stopPropagation() or .preventDefault() calls in your .submenu click handler.

I would just add a guard to that handler that checks whether the target of the click was an &lt;a&gt; within the &lt;ul&gt;, and if so, do not execute the rest of the function body - the opening/closing of the submenu.

Update

To prevent the click of the li.submenu &gt; a from following the href you would need to add the event.preventDefault() back. The snippet below has been updated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let icon = document.querySelector(&quot;.icon_menu&quot;);
  2. let nav = document.querySelector(&quot;.main_menu&quot;);
  3. $(&#39;.back&#39;).hide();
  4. $(&#39;.back&#39;).click(function() {
  5. if ($(this).is(&#39;:hidden&#39;)) return;
  6. $(this).toggle();
  7. icon.classList = &quot;bi bi-grid-fill icon_menu&quot;;
  8. icon.style.left = &quot;2%&quot;;
  9. icon.style.color = &quot;#a66fff&quot;;
  10. icon.style.fontSize = &quot;40px&quot;;
  11. nav.style.left = &#39;-300px&#39;;
  12. });
  13. icon.addEventListener(&quot;click&quot;, function() {
  14. if (this.classList.contains(&quot;bi-grid-fill&quot;)) {
  15. this.classList = &quot;bi bi-x-circle-fill icon_menu&quot;;
  16. icon.style.left = &quot;21%&quot;;
  17. icon.style.color = &quot;#ff6f6f&quot;;
  18. icon.style.fontSize = &quot;30px&quot;;
  19. nav.style.left = 0;
  20. } else {
  21. this.classList = &quot;bi bi-grid-fill icon_menu&quot;;
  22. icon.style.left = &quot;2%&quot;;
  23. icon.style.color = &quot;#a66fff&quot;;
  24. icon.style.fontSize = &quot;40px&quot;;
  25. nav.style.left = &quot;-300px&quot;;
  26. }
  27. $(&#39;.back&#39;).toggle();
  28. });
  29. $(&#39;.main_menu li ul&#39;).each(function() {
  30. $(this).parent().addClass(&#39;submenu&#39;)
  31. });
  32. $(&#39;.submenu&#39;).click(function(event) {
  33. if ($(event.target).is($(this).find(&#39;ul a&#39;))) { return; }
  34. event.preventDefault();
  35. $(this).children(&#39;ul&#39;).slideToggle();
  36. $(this).toggleClass(&#39;open&#39;);
  37. });

<!-- language: lang-css -->

  1. .main_menu {
  2. position: absolute;
  3. top: 0;
  4. left: -300px;
  5. bottom: 0;
  6. z-index: 999;
  7. background: #eee;
  8. padding-right: 2rem;
  9. transition: all 1s ease;
  10. }
  11. .icon_menu {
  12. position: fixed;
  13. top: 10%;
  14. left: 2%;
  15. font-size: 40px;
  16. color: #a66fff;
  17. cursor: pointer;
  18. z-index: 99999;
  19. transition: all 1.1s ease;
  20. }
  21. .main_menu ul {
  22. list-style: none;
  23. line-height: 60px;
  24. font-size: 35px;
  25. }
  26. .main_menu ul li a {
  27. color: #000000;
  28. text-decoration: none;
  29. padding-right: 15px;
  30. padding-left: 40px;
  31. margin-left: -60px;
  32. margin-bottom: 10px;
  33. }
  34. .back {
  35. width: 100%;
  36. height: 100%;
  37. position: fixed;
  38. z-index: 9 !important;
  39. top: 0;
  40. left: 0;
  41. right: 0;
  42. bottom: 0;
  43. background: #00000056;
  44. }
  45. .main_menu ul li ul {
  46. display: none;
  47. }
  48. .main_menu .submenu&gt;a::after {
  49. content: &#39; → &#39;;
  50. }
  51. .main_menu .open&gt;a::after {
  52. content: &#39; ↓ &#39; !important;
  53. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;section&gt;
  4. &lt;nav id=&quot;nav&quot;&gt;
  5. &lt;span class=&quot;bi bi-grid-fill icon_menu&quot;&gt;&lt;/span&gt;
  6. &lt;aside class=&quot;main_menu&quot;&gt;
  7. &lt;ul&gt;
  8. &lt;li&gt;
  9. &lt;a href=&quot;#&quot;&gt;home&lt;/a&gt;
  10. &lt;/li&gt;
  11. &lt;li&gt;
  12. &lt;a href=&quot;#&quot;&gt;our articles&lt;/a&gt;
  13. &lt;ul&gt;
  14. &lt;li&gt;
  15. &lt;a href=&quot;#&quot;&gt;social&lt;/a&gt;
  16. &lt;/li&gt;
  17. &lt;li&gt;
  18. &lt;a href=&quot;#&quot;&gt;Academic&lt;/a&gt;
  19. &lt;/li&gt;
  20. &lt;li&gt;
  21. &lt;a href=&quot;#&quot;&gt;historical&lt;/a&gt;
  22. &lt;/li&gt;
  23. &lt;/ul&gt;
  24. &lt;/li&gt;
  25. &lt;li&gt;&lt;a href=&quot;#&quot;&gt;about us&lt;/a&gt;&lt;/li&gt;
  26. &lt;/ul&gt;
  27. &lt;/aside&gt;
  28. &lt;/nav&gt;
  29. &lt;/section&gt;
  30. &lt;div class=&quot;back&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

Another Update

We can simplify all of this by explicitly targeting the first &lt;a&gt; within each li.submenu. We replace the .submenu click handler with:

  1. $(&#39;li.submenu &gt; a&#39;).click(function(event) {
  2. const $submenu = $(this).parent();
  3. $submenu.children(&#39;ul&#39;).slideToggle();
  4. $submenu.toggleClass(&#39;open&#39;);
  5. event.preventDefault();
  6. });

See example fiddle here.

huangapple
  • 本文由 发表于 2023年2月26日 22:43:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/75572732.html
  • css
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定