javascript - 如何使用切换按钮使下拉菜单的父项可点击？

Question

首先，如果您认为我的问题有问题，请向我解释您希望我进行哪些更改以使其变得更好。我已经为此工作了几天，但收效甚微，我真的在尽力而为，但我对这个话题也很陌生，所以请耐心等待。

我正在使用 Bootstrap 4.0 开发 WooCommerce Storefront 的子主题。

我正在尝试将 [jQuery Smartmenus 插件] ( https://www.smartmenus.org/about/introduction-to-smartmenus-jquery/ ) 与他们的 Bootstrap 4 插件一起用于我的主菜单的小屏幕版本，因为它带有我想要的切换按钮。这是我希望它的工作方式：就像他们的 ["SmartMenus Bootstrap 4 Addon (Navbar)" Demo] ( http://vadikom.github.io/smartmenus/src/demo/bootstrap-4-navbar.html )，与一个区别：我希望父项是可点击的，以便它指向链接而不是切换下拉菜单。+/- 按钮应该是唯一的下拉菜单。

我设法使用这个问题的部分答案让父链接可以点击。我正在使用相同的nav walker，只是 Bootstrap 4 版本。在那个文件中，我用“$atts['href'] = !empty($item->url)?$item->url:'';”替换了原来的第 206 行 正如链接问题中所建议的那样。虽然我没有更改 CSS，但我不希望在悬停时发生任何特别的事情。

我现在的问题是，单击父链接和单击 +/- 都会导致下拉菜单在加载父链接之前被展开片刻，并且我被定向到该链接。我希望父链接不进行任何切换，但更重要的是，我需要 +/- 按钮来切换下拉菜单，而不是用作指向父项页面的链接。我怎样才能让它切换下拉菜单？

我试图在 walker 文件的同一部分中删除 data-toggle 属性和下拉切换类，但这没有任何区别。

这是 header.php 中我的小屏幕菜单的代码：

<div id="small-screen-menu" class="d-block d-sm-none">
   <?php sk_smartmenus_init_in_footer(); ?>
   <nav id="xs-site-navigation" class="navbar navbar-expand-sm" role="navigation">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-site-navigation" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <?php
         wp_nav_menu( array(
           'theme_location'    => 'main_menu',
           'depth'             => 4,
           'container'         => 'div',
           'container_class'   => 'collapse navbar-collapse navbar-1-collapse',
           'container_id'      => 'main-site-navigation',
           'menu_class'        => 'nav navbar-nav sm sm-simple',
           'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
           'walker'            => new WP_Bootstrap_Navwalker(),
         ) );
      ?>                            
   </nav>
</div>

以下是functions.php中对应的函数：

if ( ! function_exists( 'sk_smartmenus_init_in_footer' ) ) {
   add_action('wp_enqueue_scripts', 'sk_smartmenus_init_in_footer');
   function sk_smartmenus_init_in_footer() {
    add_action( 'print_footer_scripts', 'smartmenus_init' );
   }
}
function smartmenus_init() { 
   ?>
       <script type="text/javascript">
          $(function() {
            $('#menu-categories-menu').smartmenus();
          });
       </script>
   <?php 
}

我真的不确定这些功能是否正确。我需要更改 walker 文件的更多内容吗？还是 Smartmenus JS？如果是这样，是什么？我想不通。任何帮助，将不胜感激！

PS：如果你有一个没有 Smartmenus 插件的解决方案，它可以创建一个带有切换按钮的可点击菜单项，我会接受的！我并不是很喜欢 Smartmenus。

2018 年 12 月更新：我还没有弄清楚这一点。谁能帮我？请？

标签： javascriptjquerywordpresstwitter-bootstrapwp-nav-walker