Wordpress中Javascript的匿名功能/引用错误

Question

我很难让我的JavaScript代码与在Wordpress中构建的网站一起使用。 我有一个jsfiddle，您可以在这里找到： http : //jsfiddle.net/sarahk3112/aw5xR/13/

这并不是我想要的样式，而是通过上下滑动并在具有子导航的“作品集”和“关于”链接之间切换来显示所需的效果。 因此，它在这里可以完美运行，但是当我在Wordpress页面模板中实现相同的确切代码时，它将无法正常工作。 Wordpress网站目前处于维护模式，因为我需要修复此问题，因此除非绝对必要，否则我无法将您指向该网站的实时链接（这是一个客户端网站，他们还没有准备好上线）。

这是我单击“作品集”时Safari显示的错误：

（匿名函数）-moderndayfloral.com

当我单击“投资组合”时，Chrome显示错误：

未被捕获的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>

我希望这是足够的信息以寻求帮助。 我被困在一块岩石和坚硬的地方之间，无法将其变为现实，因此您可以看到。 我知道Javascript在涉及Wordpress时需要多加注意，因此，我感谢能提供的任何帮助。 如果还有其他我可以提供的信息，请告诉我！

谢谢你的时间！

Answer 1

您不需要将功能包装在文档上，也不需要在加载dom后立即执行任何功能，并且您可以检查display的错误display如inline显示中的show转换：

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);
            }
        }
    });
}