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');
    }
  });

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

我花了很多时间试图弄清楚如何解决这个问题，而我能想到的唯一方法就是在显示崩溃引导程序菜单的小型设备上，默认情况下菜单的方式是展开以显示所有父项和子项。

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

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();  
    }
  }
});

尝试并获得结果。

在移动崩溃时，所有的boostrap子菜单都显示为打开

1 个答案: