在折叠移动显示所有引导子菜单为打开

Question

我目前正在使用 wp-bootstrap-navwalker.php 在 Wordpress 上创建引导导航菜单。我有一个网站要建立，客户需要导航子菜单的父级可点击。我找到了修改 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');
    }
  });

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

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

但是，我一直无法找到使其正常工作的方法。有谁知道这怎么可能？

Answer 1

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

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

试一试，然后得到结果。