php - 链接在 Wordpress 菜单中不可点击，但可以在新选项卡中打开

Question

免责声明:很抱歉帖子看起来太大了，但我只是觉得我应该提供所有细节。我确定这个问题非常愚蠢，但我无法弄清楚:(

背景:我正在创建一个 wordpress 网站，使用来自 Access Press 的名为 Parallax 的很棒的主题。我想在购买专业版之前试用我的商业网站，因此决定自己进行一些更改。

问题:您可以使用主题的菜单(允许动画和同一页面滚动；这 Golum 想要)或使用 native wordpress 菜单(不允许滚动；Golum 讨厌)。

已尝试解决方法:我想我可以进入 header.php 并手动添加一个菜单项。因此，根据我的理解，以下是代码:

<nav id="site-navigation" class="main-navigation">
        <div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>

            <?php 
            $sections = of_get_option('parallax_section');
            if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
            ?>
            <ul class="nav single-page-nav">
                <?php
                $home_text = of_get_option('home_text');
                if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
                    <li class="current"><a href="<?php echo esc_url( home_url( '/' ) ); ?>#main-slider"><?php echo esc_attr($home_text); ?></a></li>

                <?php endif;

                if(!empty($sections)):
                foreach ($sections as $single_sections): 
                    if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
                    $title = get_the_title($single_sections['page']); ?>
                    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#section-<?php echo $single_sections['page']; ?>"><?php echo $title; ?></a></li>
                    <?php 
                    endif;
                endforeach; 
                endif; ?>
                    <li><a href="http://google.com" target="_self">Pre-order Here</a></li>
            </ul>
            <?php   
            else: 
                <some more code that picks custom menu if you choose to skip parallax menu>

        </nav>

第一个 LI 元素只是在页面中放置文本“主页”。第二个从视差菜单中选择所有值。 最后一个 LI 元素是我包含的元素。

                <li><a href="http://google.com" target="_self">Pre-order Here</a></li>

行为:这完美地将元素添加到菜单中，并且看起来也是可点击的。问题是 - 当它被点击时，它什么都不做。如果我右键单击它并在新选项卡中打开，它工作得很好。包括下面的相关 CSS 供您引用

编辑:如果我包含指向页面另一部分的链接。有用。示例:http://domain.com/#section-20

.main-navigation {
    float: right;
    max-width: 80%;
    margin-top: 15px;
}
.logo-top .main-navigation{
    float: none;
    width: auto;
    text-align: center;
    max-width: none;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: inline-block;
}
.main-navigation ul li{
    position: relative;
}
.main-navigation > ul > li {
    float: left;
    position: relative;
    font-family: 'Oxygen', sans-serif;  
    font-weight: 400;
}
.main-navigation > ul > li > a{
    text-transform: uppercase;
    font-size:14px;
    padding: 5px 15px;
}
.main-navigation > ul > li.current a{
    color: #E66432;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color:#333;
}
.main-navigation ul ul {
    background: #FFF;
    position: absolute;
    top: 100%;
    left:0;
    z-index: 99999;
    padding:0 10px;
    font-size: 15px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    display: none;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    min-width: 200px;
}
.main-navigation ul ul li {
    border-bottom: 1px solid #EEE;
    padding: 8px 0;
}
.main-navigation ul ul li:last-child{
    border:none;
}
.main-navigation li:hover > a {
    color: #E66432;
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
    color: #E66432;

Answer 1

感谢@pschueller 和@dingo_d!!

你把我推向了正确的方向。滚动 JS 插件的 github 有秘诀。

我必须使用 href 向我的标签添加一个 class='external' 并使用以下内容更新 jquery.nav.js:

已替换

filter: '',

与

filter: ':not(.external)',