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

Posted 2023-05-09

【中文标题】在折叠移动显示所有引导子菜单为打开

【英文标题】：On collapse for mobile show all boostrap sub menus as open

【发布时间】：2018-07-03 06:43:16

【问题描述】：

我目前正在使用 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');
    
  );

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

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

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

【参考方案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();  
    
  
);

试一试，然后得到结果。

【讨论】：

谢谢，我最初确实尝试过，但没有成功。只是为了确保我尝试了您的代码并且仍然在移动设备上我遇到了问题。顺便说一句，您在此代码中缺少右括号。应该是： $(".dropdown-toggle").on('click', function(e) e.preventDefault(); );