0

我很难让我的 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 时需要额外注意，所以我很感激可以提供的任何帮助。如果有任何其他信息可以提供帮助，请告诉我！

谢谢你的时间！

4

1 回答 1

0

您不需要在准备好的文档上包装函数，一旦加载了 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);
            }
        }
    });
}
于 2012-09-12T06:36:37.727 回答