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作为show转换在inline显示：

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

Wordpress中使用Javascript的匿名函数/引用错误

1 个答案: