如何使顶层菜单项没有链接，但有链接的子菜单？

我正在构建一个水平菜单，该菜单上的某些条目将具有下拉菜单（子菜单），而有些则不会。具有子菜单的页面实际上不是页面。它们只是作为下拉菜单的指南。

例如，说水平菜单如下：

设为首页 关于我们| 产品展示 方向| 联系

而且“产品” li项旨在在其下方的垂直下拉列表中链接3个页面，因此“产品”本身实际上并不代表页面，如何在WP中做到这一点？

（我将WP用作CMS，并带有静态主页和内部页面。我构建自己的模板，在CSS中设置菜单样式，然后将菜单注册在functions.php中，然后在模板中调用它们。）在WP中，您可以向通过页面列表或自定义链接显示菜单。但我不希望将“产品”链接在一起。如果我没有将链接添加到自定义链接，则不会让我将其添加到菜单。

通过菜单管理可以做到吗，还是我必须通过其他方式解决？

感谢您的任何帮助！

我有一些想法：

1. 将自定义链接设置为#不返回任何内容
2. 将自定义类添加到项目，然后使用jQuery删除链接。
3. 使用与jQuery方法等效的PHP
4. 使用“ 禁用父菜单链接”插件（或拆开并编写自己的插件）

没有插件或任何东西的最简单方法是使用WordPress的“菜单”功能。以下是WordPress 4.8的说明：

1. 在WordPress信息中心中，转到“外观->菜单”
2. 在“编辑菜单”标签中，选择“自定义链接”
3. 对于URL，输入“＃”（不带引号）
4. 对于链接文本，请在下拉菜单的顶层输入所需的文本
5. 点击“添加到菜单”按钮
6. 将菜单项拖动到菜单中的所需位置
7. 对于您刚刚添加的菜单项，请单击该项右侧的向下箭头（它将在该项左侧显示为“自定义链接”）
8. 从网址中删除“＃”。在所有浏览器中，这会将链接转换为纯文本。
9. 点击“保存菜单”按钮

我想到的最简单的方法是创建一个“链接”值为“ #。这会将用户发送到同一页面上的空哈希，因此基本上没有链接。

但是，使用空哈希作为占位符链接有一些副作用。该链接仍会出现并且表现得像一个链接，因此当用户单击看起来是链接但什么都没有发生的链接时，它可能会使用户感到困惑。另一个效果是，单击空的哈希链接将覆盖任何现有的哈希，从而将用户发送到页面顶部。对于位于页面顶部的菜单来说，这可能并不那么令人担心，但是当页面在您不期望的情况下意外跳动时，尤其是对于页脚菜单时，它会非常刺耳。

解决方案是将空哈希方法与一段代码结合起来，以检测菜单中何时使用了空哈希链接，并href从该链接中完全删除该属性。a没有href属性的元素是创建占位符链接的正确HTML 5方法。

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

这为我工作：

我在菜单>屏幕选项> CSS类中激活了CSS类，然后给出了要停用“ .nolink”类的菜单元素，并将以下代码添加到了我的自定义CSS面板中：

.nolink {
   pointer-events: none;
   cursor: default;
}

使用PHP方法，我将此代码添加到functions.php中：

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

这将用post_name ==“ contact”用项目菜单的span元素替换链接，这就是我想要的。您可以轻松地对其进行更改以检查菜单标题或ID，或者添加一些代码以检查其是否具有任何子菜单项等。

我是这样解决的：在您主题的header.php中，我搜索了：

'link_before'     => '',
'link_after'      => '',

并替换为：

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

简而言之，该脚本检查其父链接是否以“＃”结尾，在这种情况下，它将在A标记的内容周围添加一个span元素，从而禁用了单击。

希望能帮助到你 ：-）

正如这里的其他建议一样，您可以使用＃作为其URL创建自定义链接菜单项。一旦将其添加到菜单中，然后将其删除。最后，您可以使用此简单的正则表达式从这些链接中删除实际的标签。

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

这将删除点击（并取消样式设置项目）。这样，您不必使用菜单中的自定义＃链接。

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

意识到这是一个旧线程，但是要使在Wordpress中具有链接的快速而肮脏的方法是将链接URL设置为：

#_

注意标签后面的下划线。这样，如果您的菜单向下滚动页面（即固定页面），则单击时不会跳到页面顶部，并且不需要任何插件/脚本。

我意识到我已经很晚了，但是这是我使用的两种方法：

1）使父菜单项成为第一个子项的副本，并更改​​其标签。例如，如果“产品”下的第一项是“产品1”，则将“产品1”用作父菜单项，然后将其标签更改为“产品”。这样，“产品”和“产品1”都将进入产品1页面。

2）添加重定向，以便将“产品”页面重定向到产品1。此选项的好处是，它允许您创建空白的“产品”页面以在“页面”中创建层次结构列表，但是如果有人尝试转到空白的“产品”页面，它们将被重定向。

转到外观，然后单击菜单。在本节中，进入菜单结构，然后单击向下箭头以扩展页面，您将看到一个框，其中显示禁用链接。选中该框并保存。

1. 将自定义链接设置为＃，它将不会返回任何列表项

2. 添加此过滤器：

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }

3. 编辑span CSS以获取与样式相同的样式<a>，请不要忘记cursor: context-menu;。

创建“自定义链接”菜单项并添加“ javascript :;” （不带引号）的网址字段。这比使用“＃”更好，因为单击后它不会将页面滚动到顶部。

从1/2019开始，产生正确的HTML5的解决方案是执行以下操作。

1. 添加URL设置为＃以及所需名称的自定义链接。这两个字段都是必需的。
2. 编辑新添加的“自定义链接”，以使URL为空。
3. 保存更改。

这将产生一个顶级导航，<a>Menu</a>这是表示不可点击链接的正确方法。

您可以<a>使用纯css 禁用所有一级菜单项标签上的事件。.main-menu根据您的菜单命名，该类可能有另一个名称。

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}

在另一个问题上可以找到更容易的解决方案：

管理菜单-在子菜单页面上突出显示顶级菜单（不显示子菜单）

寻找Askelon的答案。工作完美，无需执行任何preg_replaces或jquery。