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

我正在构建一个水平菜单，该菜单上的某些条目将具有下拉菜单（子菜单），而有些则不会。那些具有子菜单的页面实际上不是页面。例如，说水平菜单如下所示：

首页|关于我们|产品展示方向| Contact

，“ products” li项旨在在其下方的垂直下拉列表中链接3个页面，因此“ products”本身实际上并不代表页面，我该怎么做？ WP？

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

这是否可以通过菜单管理来完成，还是必须通过其他方式解决？

谢谢您的帮助！

继承人的解决方案很好用，去检查一下wordpress.org/support/topic/no-page-menu-item

您可以使用js来做到这一点。试试这篇文章。 kvcodes.com/2014/07/…

在“ URL”框中，将其保留为空白。

没有人提到WP_NAV_MENU_WALKER类，您可以编写自己的助行器，吐出您想要的东西。

#1 楼

我有一些想法：

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

感谢您的提示和链接！正如Gavin建议的那样，对自定义链接使用＃表示“有效”；其他选项可能会更好，尽管并非易事。好吧，该插件可能很简单，但是如果我可以更直接地完成相同的事情，我不喜欢使用插件。我必须决定最佳方法。再次感谢！

– PVA
2011年10月5日在21:17

如果您打算在触觉设备中使用它，请小心使用空的href =“”，因为如果不使用JS，大多数触觉设备用户将无法看到下拉菜单

–西蒙
2013年11月21日15:05

链接断开。您可能需要将其中一些想法付诸实践

–乳木果
15年5月13日在1:33

此外，＃2和＃3引用wp_list_pages（），而不是wp_nav_menu（）

–乳木果
15年5月13日在1:34

#2 楼

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

从WordPress仪表板，转到“外观->菜单”
在“编辑菜单”选项卡中，选择“自定义链接”
对于URL，输入“＃”（不带引号）
对于链接文本，在下拉菜单的顶层输入所需的文本
单击“添加到菜单”按钮
将菜单项拖动到菜单内的所需位置
对于刚添加的菜单项，请单击菜单项右侧的向下箭头（它将在菜单项左侧显示为“自定义链接”该项目）
从网址中删除“＃”。在所有浏览器中，这会将链接转换为纯文本。
单击“保存菜单”按钮

谢谢你的提示。这是ez，尽管不是完美的，因为当您将鼠标悬停在标签上时，标签看起来仍然像“链接”，但它们不会随处可见。因此它可以在紧要关头工作。

– PVA
2011年10月5日在21:15

您是否阅读了整个评论？添加链接后，单击链接名称旁边的下拉箭头，然后从URL文本框中删除“＃”。在所有浏览器中，这将导致链接不可单击。

– GavinR
2011年10月6日13:10

是的，谢谢，我确实阅读了整个评论。我回过头来再试一次，意识到了我的问题。当我离开＃号时，该字会显示在导航栏中，但会显示为“无效链接”。当我删除＃号时，除非将鼠标悬停在导航栏上，否则该词不会出现在导航栏中，而是会以悬停状态显示。因此，我认为这意味着我必须将CSS应用于该单词，以便它看起来没有链接。我不确定为什么会显示悬停状态...

– PVA
2011年10月6日在22:13

它仍然在4.9.5中，但是我不确定，因为它“感觉”起来像是漏洞的hacking优势。如果不是，那将为人们省去很多麻烦……这有点像Wordpress认为“ 1 2 3 4 5 6”是一个强密码...这一事实。

–brooklynsweb
18年5月22日在16:52

仅供参考，如果您执行第8步（无论出于何种原因），那么当您将鼠标悬停在自定义链接上时，光标将不会成为指针。在这种情况下，可以使用pointer：cursor设置样式。

– MarsAndBack
18年11月17日在2:57

#3 楼

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

但是，使用空哈希作为占位符链接会有一些副作用。该链接仍会出现并且表现得像一个链接，因此当用户单击看起来是链接但什么都没有发生的链接时，它可能会使用户感到困惑。另一个效果是，单击一个空的哈希链接将覆盖任何现有的哈希，从而将用户发送到页面顶部。对于位于页面顶部的菜单来说，这可能并不那么令人担心，但是当页面在您不期望的情况下意外跳动时，尤其是对于页脚菜单时，这是非常令人讨厌的。 br />解决方案是将空哈希方法与一段代码结合起来，以检测菜单中何时使用了空哈希链接，并从该链接中完全删除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 );
} );

您甚至可以更改整个标签：<？php add_filter（'wp_nav_menu_items'，function（$ menu）{return str_replace（['']，['']，$ menu）;}）; ？>。只是不要忘了通过CSS或JS添加下拉列表。

–准
20-4-2在12:54

#4 楼

这对我有用：

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

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

这也杀死了下拉菜单。

–user385917
17年6月28日在18:06

我认为，使用＃作为链接目标，然后应用自定义CSS类进行样式设置是最不容易的解决方案。但是，设置指针事件：对我来说，没有什么意义不大，因为它将破坏子菜单。您能否详细说明为什么设置该属性？

–user1438038
19年7月4日在9:32

#5 楼

使用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，或者添加一些代码以检查其是否具有任何子菜单项等。

'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元素，从而禁用了点击。 />希望有帮助:-)

嗨，我知道这是一个旧答案，但是为了将来参考，我不会只是进入并更改主题头文件，因为在下一次更新时，您的所有代码都将被覆盖。最好的解决方案是使用您的自定义代码创建一个子主题。

–斯科特
17年3月21日在14:29

#9 楼

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

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

#10 楼

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

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

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );

function wpse_remove_empty_links( $menu ) {

    return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span></span>", $menu);

}

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

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

您可以用任何适合您的元素替换'div'。

此版本适用于5.3.2版（已在此版本中进行测试，但在其他版本中也应使用）

以这种形式，保留了'before'中所有自变量'after'，'link_before'，'link_after'，wp_nav_menu()等的工作。菜单。

#17 楼

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

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

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

#18 楼

您可以使用纯css为所有第一级菜单项禁用<a>标记上的事件。 .main-menu类可能会根据您的菜单命名而具有其他名称。

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

编程黑洞网

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

评论

#1 楼

评论

#2 楼

评论

#3 楼

评论

#4 楼

评论

#5 楼

#6 楼

#7 楼

#8 楼

评论

#9 楼

#10 楼

#11 楼

#12 楼

评论

#13 楼

#14 楼

#15 楼

#16 楼

#17 楼

#18 楼