Question

困扰我一段时间的问题是，默认情况下，在我主题的移动菜单中，所有菜单项都会自动展开，因此如果您有很多子菜单项，将很难导航。

我正在尝试使用下拉箭头折叠子菜单项。看起来很简单，但是在WordPress中没有用于调整它的选项。

我设法在Header.php中找到了一些可以在下面找到的代码

有什么想法可以修改此代码以使子菜单项通过下拉箭头折叠？

谢谢

基督徒

Answer 1

您可以通过Bootstrap轻松完成此操作： Bootstrap Dropdowns

或者，您也可以在CSS中隐藏下拉菜单：

li ul{
    display: none;
}

并在使用jQuery的箭头单击上显示它：

$("li a").click(function(){
    $(this).parent().find("ul").toggle();
});

演示： https://codepen.io/seyyedmojtaba72/pen/VOgmdE

Answer 2

纯js

let arr=[...document.querySelectorAll(".toggle")];

arr.map(a=> a.onclick = e => {
    a.nextElementSibling.classList.toggle('hide');
    a.innerHTML = a.innerHTML=='→' ? '&darr;' : '&rarr;'; 
});

.hide { display: none }
.toggle { cursor: pointer}

<nav>
  <ul id='menu'>
    <li><a class='home' href='/'>Home</a></li>
    <li>
      <a class='prett' href='#' >SubMenu A</a>
      <span class="toggle">&rarr;</span>
      <ul class='submenus hide'>
        <li><a href='#' >Dropdown 1</a></li>
        <li><a href='#' >Dropdown 2</a></li>
      </ul>
    </li>
    <li>
      <a class='prett' href='#' >SubMenu B</a>
      <span class="toggle">&rarr;</span>
      <ul class='submenus hide'>
        <li><a href='#' >Dropdown 3</a></li>
        <li><a href='#' >Dropdown 4</a></li>
      </ul>
    </li>
    <li><a class='home' href='/'>Back</a></li>
  </ul>
</nav>

Answer 3

对不起，我很难弄清楚如何正确粘贴代码。这是下面的代码。有什么方法可以修改此代码以在移动设备上具有可折叠的下拉菜单？

<!– Toggle button for Main Navigation on mobile –>
<button class=”btn btn-primary header__navbar-toggler hidden-lg-up js-sticky-mobile-option” type=”button” data-toggle=”collapse” data-target=”#shaka-main-navigation”><i class=”fa fa-bars hamburger”></i> <span><?php esc_html_e( ‘MENU’ , ‘shaka-pt’ ); ?></span></button>
<!– Main Navigation –>
<nav class=”header__navigation collapse navbar-toggleable-md js-sticky-desktop-option” id=”shaka-main-navigation” aria-label=”<?php esc_html_e( ‘Main Menu’, ‘shaka-pt’ ); ?>”>
<?php
if ( has_nav_menu( ‘main-menu’ ) ) {
wp_nav_menu( array(
‘theme_location’ => ‘main-menu’,
‘container’ => false,
‘menu_class’ => ‘main-navigation js-main-nav js-dropdown’,
‘walker’ => new Aria_Walker_Nav_Menu(),
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s” role=”menubar”>%3$s‘,
) );
}
?>
<?php

向移动菜单添加下拉和折叠功能

3 个答案: