0

http://www.threecell.com/demoにある WordPress Web サイトに、次の Jquery Snippet (ホバー時の色のフェードイン) を組み込むことを検討しています。現在のメニュー タグ構造にどのように適合させたかに基づいて、コードを以下に示します。functions.php ファイルに Jquery をロードしました。

$(document).ready(function(){ 

//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    $(this).fadeOut(0).addClass('hover').fadeIn(300);

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).fadeOut(300)
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });

});
});

関連するメニュー スタイルは次のとおりです。

#access {
    padding:0 20px;
    background:#111;
    box-shadow:0 0 7px rgba(0, 0, 0, .1);
}

#access ul {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    font-weight:600;
    text-transform:uppercase;
}

#access li {
    position:relative;
    float:left;
    padding:0;
    margin:0;
}

#access ul li:first-child {
    padding-left:0;
}

#access a {
    display:block;
    padding:15px 24px;
    color:#f0f0f0;
    text-decoration:none;

}

#menu-sample-menu li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    padding: 0 12px 0 12px;
}

#menu-sample-menu li a.hover {
    background: orange;
}


#access li.current_page_item > a,
#access li.current-menu-item > a {
    background: orange;
    color: white;
    text-decoration:none;
}

#access a span {
    color:#999;
    font-size:11px;
    font-style:italic;
    font-weight:normal;
    line-height:1.62em;
    text-transform:none;
}

これまでのところ、ホバー状態はトリガーされていません。任意の支援やガイダンスをいただければ幸いです。

よろしくお願いします、

T

4

2 に答える 2

1

ここで jsFiddle を作成しました: http://jsfiddle.net/RV6fE/3/

正常に動作しているようです。あなたのサイトからメニュー HTML だけを抽出する必要がありました (フィドルでは少し不安定に見えます)。

あなたのサイトを見ると、javascript エラーがあります。

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] のプロパティ '$' は関数ではありません

この問題の正確な原因はわかりませんが (このスクリプト ブロックの前に jQuery が正常に読み込まれているようです)、1 つのことを試すことができます。上に貼り付けたコードで、これを変更します。

$(document).ready(function(){

これに：

jQuery(document).ready(function($){

私がこれを提案する理由は、この方法で document.ready イベントを設定する別の jquery ブロック (使用しているテーマによって注入されると思われる) がサイトにあるように見えるからです。

于 2013-08-25T03:25:11.587 に答える
-1

Jquery は別の JavaScript ファイルにロードし、次のようにサイト コード (header.php) の先頭にリンクする必要があります。

<script type="text/javascript" src="URL IS HERE"></script>

または以内タグもページの先頭にあります。

プレーンな JavaScript コードを functions.php ファイルに挿入しないことをお勧めします。これは、Wordpress エンジンの他の主要な機能のコアであり、php コード構造用に予約されているためです。

于 2013-08-25T03:06:31.123 に答える