0

Wordpress で構築したサイトで JavaScript コードを動作させるのに苦労しています。私はあなたがここで見つけることができるjsfiddleを持っています: http://jsfiddle.net/sarahk3112/aw5xR/13/

これは私が望むスタイルではありませんが、上下にスライドし、サブナビゲーションを持つ「ポートフォリオ」リンクと「約」リンクを切り替えることで、望ましい効果を示しています。したがって、ここでは完全に機能しますが、Wordpress ページ テンプレートにまったく同じコードを実装すると機能しません。これを修正する必要があるため、Wordpress サイトは現在メンテナンス モードになっているため、絶対に必要な場合を除き、ライブ リンクを紹介することはできません (クライアント サイトであり、まだライブに移行する準備ができていません)。

「ポートフォリオ」をクリックしたときに Safari に表示されるエラーは次のとおりです。

(匿名関数) - moderndayfloral.com

「ポートフォリオ」をクリックすると Chrome に表示されるエラー:

Uncaught ReferenceError: slideonlyone が定義されていません

functions.js ファイルの Javascript コードは次のとおりです。

    jQuery(document).ready(function(){
    function slideonlyone(thechosenone) {
    $('span[class|="subnav"]').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
    if ($(this).css('display') == 'block') {
        $(this).hide(200);
    }
    else {
        $(this).show(200);
        }
    }
    else {
    $(this).hide(200);
    }
    });
    }
    });

そして、これが私のページテンプレートファイルのhtmlコードです:

    <ul id="hometopnav">
    <li><a id="portfolio" href="javascript:slideonlyone('portfolio');" >portfolio</a>
    <span id="portfolio" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/weddings">weddings</a>
    <a href="/events">events</a>
    </span>
    </li>
    <li><a href="/eventdesign">event design</a></li>    
    <li><a href="/boutique">boutique</a></li>
    <li><a id="about" href="javascript:slideonlyone('about');" >about</a>
    <span id="about" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/philosophy">philosophy</a>
    <a href="/services">services</a>
    <a href="/jenn">jenn</a>
    </span>
    </li>
    <li><a href="/thanks">thanks</a></li>
    <li><a href="/accolades">accolades</a></li>
    <li><a href="/blog">blog</a></li>
    <li><a href="/contact">contact</a></li>
    </ul>

これが支援を求めるのに十分な情報であることを願っています。ご覧のとおり、ライブにすることができず、岩と固い場所の間に挟まれています。Wordpress に関しては、Javascript に少し特別な注意が必要であることは承知しています。他に役立つ情報がありましたら、お知らせください。

御時間ありがとうございます！

4

1 に答える 1

0

ドキュメントの準備ができたら関数をラップする必要はありません。dom が読み込まれるとすぐに実行するものはありません。また、表示されている変換displayとして間違っているかどうかをチェックしています。showinline

var jQuery = {};
jQuery = jQuery.noConflict(true);
function slideonlyone(thechosenone) {
    jQuery('span').closest('.subnav').each(function(index) {
        if (jQuery(this).attr("id") == thechosenone) {
            if (jQuery(this).css('display') != 'none') {
                jQuery(this).hide(200);
            } else {
                jQuery(this).show(200);
            }
        }
    });
}
于 2012-09-12T06:36:37.727 に答える