jquery - 在手机折叠时将所有 Bootstrap 子菜单显示为打开

Question

我目前正在使用 wp-bootstrap-navwalker.php 在 Wordpress 上创建 Bootstrap 导航菜单。我有一个网站要建立，客户需要导航子菜单的父级可点击。我找到了修改 wp-bootstrap-navwalker.php 的代码，以便它允许父级成为链接。然而，这会导致较小设备出现问题。

        // If item has_children add atts to a.
        if ( $args->has_children && 0 === $depth ) {
            $atts['href']           = '#';
            $atts['data-toggle']    = 'dropdown';
            $atts['class']          = 'dropdown-toggle';
            $atts['aria-haspopup']  = 'true';
        } else {
            $atts['href'] = ! empty( $item->url ) ? $item->url : 
        '';
        }

  $(window).resize(function() {
  //1200 is my modified breakpoint on this design for the collapse menu 
    if ($(window).width() < 1200)  {
      $(".dropdown-toggle").attr('data-toggle', 'dropdown');
    } else {
      $(".dropdown-toggle").removeAttr('data-toggle dropdown');
    }
  });

由于父菜单项通常是一个可点击的事件，它会打开子菜单以显示子链接，并且此功能现在已更改，因此除了可以显示悬停事件的桌面浏览器外，它不再适用于任何东西。

我花了相当多的时间试图弄清楚如何解决这个问题，我能想到的唯一方法是在显示折叠 Bootstrap 菜单的较小设备上，默认情况下菜单是这样的展开以显示所有父项和子项。

然而，我一直无法找到一种方法来让它工作。有谁知道这怎么可能？

Answer 1

你不需要那样做。使用您自己的代码 在移动设备上，您可以简单地添加 preventDefault()。这将防止事件的默认 Action 被触发；换句话说， anchor 链接不会导航到 href 指针，而是在您的情况下会触发下拉菜单。

$(window).resize(function() {
  if ($(window).width() < 1200)  {
    $(".dropdown-toggle").attr('data-toggle', 'dropdown');
  } else {
    $(".dropdown-toggle").on('click', function(e) {
      e.preventDefault();  
    }
  }
});

尝试一下，然后返回结果。