3

私がWordpressを使用しているためかどうかはわかりthis.hrefませんが、hrefを含むアイテムにhrefが返されていません（たとえば、「連絡先」では、http: //www.domain.net/undefinedではなくhttp://www.domain.net/undefinedが返されます：/ /www.domain.net/contact )。スクリプトを削除すると、nav は 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ワードプレスファイルがあります

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

ワードプレスが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

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 に答える