3

我不确定是不是因为我使用的this.href是 Wordpress，但没有返回拥有它们的项目的 href（例如，在“联系人”中，它返回http://www.domain.net/undefined而不是http:/ /www.domain.net/contact）。如果我删除脚本导航加载 href 就好了。

这是JS

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

这是php wordpress文件

<div id="nav_wrap">
        <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
    </div>

这是 wordpress 以 html 格式返回的内容

<div id="nav_wrap">
        <div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.domain.net">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.domain.net/jobs/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.domain.net/breweries/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.domain.net/contact/">Contact</a></li>
</ul></div></div>
    </div>
4

5 回答 5

2

这是因为您正在运行的选择器.menu-item是<li>. 它没有 href 属性。

您需要选择<a>标签内的<li>标签。这应该这样做：

$(".menu-item a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#page-wrap").fadeOut(1000, redirectPage);        
});

<li>这样做与选择然后孩子的其他答案相比，这样做的好处<a>是，这只会在用户单击实际链接时运行。其他的将在单击中的任何位置时运行<li>，这取决于您的 CSS，可能在实际链接空间之外。

带有工作示例的 jsFiddle

于 2013-07-30T22:23:07.917 回答
1

Menu item没有返回 href 因为它是一个<li/>.

您需要定位<a>菜单项的子元素。

linkLocation = $(this).children('a').attr('href');

于 2013-07-30T22:22:44.840 回答
0

更改linkLocation = this.href;为linkLocation = $(this).attr('href');或如果不起作用，请尝试linkLocation = $(this).find('a').attr('href');

于 2013-07-30T22:22:12.400 回答
0

由于您使用的是 jQuery，因此您可能想要使用所有 jQuery：

linkLocation = $(this).children('a').attr('href');
于 2013-07-30T22:22:44.067 回答
0

看起来您的href属性仅与<a>标签相关联，但点击事件正在添加到<li>标签中。将您的代码更改为$(".menu-item a").click ...

于 2013-07-30T22:36:03.380 回答