0

我希望将以下 Jquery Snippet（悬停时的颜色淡入）与我位于http://www.threecell.com/demo的 WordPress 网站合并。根据我如何将其适应当前菜单标签结构，该代码包含在下面。我已经在我的 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;
}

到目前为止，悬停状态没有被触发。任何帮助或指导将不胜感激。

最好的祝福，

吨

4

2 回答 2

1

我在这里创建了一个 jsFiddle：http: //jsfiddle.net/RV6fE/3/

它似乎工作正常。我只需要从您的站点中提取菜单 HTML（它看起来有点不稳定）。

查看您的网站，您遇到了一个 javascript 错误：

未捕获的类型错误：对象 [object Object] 的属性“$”不是函数

我不确定究竟是什么导致了这个问题（看起来 jQuery 在这个脚本块之前被成功加载），但你可以尝试一件事。在上面粘贴的代码中，更改：

$(document).ready(function(){

对此：

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

我建议这样做的原因是，您的网站上似乎还有另一个 jquery 块（我假设它是由您正在使用的主题注入的）以这种方式设置 document.ready 事件。

于 2013-08-25T03:25:11.587 回答
-1

Jquery 应该加载到一个单独的 javascript 文件中，将其链接到站点代码 (header.php) 的头部，如下所示：

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

或内标签也在页面的头部。

建议不要在functions.php文件中插入纯javascript代码，因为它是Wordpress引擎其他主要功能的核心，保留给php代码结构。

于 2013-08-25T03:06:31.123 回答