0

我的代码有以下问题->它似乎没有与 jQuery 交互，但我在 js 控制台中没有收到任何错误：

此菜单中的主要下拉标题是Trails

当 Trails 悬停在它上面时，它应该显示如下<li>

jQuery：

jQuery(document).ready(function () {
    $(".current a").mouseenter(function(){
       $(this).siblings("ul").show();
    }).mouseout(function(){
       $(this).siblings("ul").hide();
    });
});

CSS：

//Controls the sub li    
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{
        width:185px;
        padding:5px 0 5px 5px;
        border-top:1px dotted #424242;
        border-bottom:0px;
    }
//Controls the sub ul
    #wrapper #contentarea #blue_box .centerblue_txt ul li ul{
        border:1px solid red;
        display:none;
    }

HTML: -这种 HTML 格式由 PYROCMS 提供，我无法控制它

<li class="current">
        <a href="">Trials</a>
        <ul>
            <li class="first">
                <a href="">Link One</a>
            </li>
            <li>
                <a href="">Link Two</a>
            </li>
            <li>
                <a href="">Link Three</a>
            </li>
            <li class="last">
                <a href="">Link Four</a>
            </li>
        </ul>
    </li>
4

2 回答 2

2

嘿，这可能不是您所要求的，但这将解决您的问题。

将此添加到您的 CSS 并删除该 jQuery 脚本

​.curre​nt > ul {
display: none;
}

​.current:hover > ul {
display: block;
}​

因为即使出于某种模糊的原因您的 jQuery 无法正常工作，让我告诉您即使您运行它也不会产生预期的结果。

于 2012-04-17T04:16:34.987 回答
2

这是你要杰西的答案。为了帮助减少发生冲突的可能性，您可以创建自己的命名空间。jQuery 本身可以使用，最常见的是，$或者您也可以使用实际的单词/名称jQuery来代替 $。但是您也可以使用您想要的任何单词/名称创建自己的版本。在脚本名称的开头是一个变量，在我的示例中，我使用了您的名字，如下所示：

var jess = jQuery;

然后，无论何时使用jess它都会使用变量值，即 jQuery。所以：

jess(document).ready()

相当于：

$(document).ready()

并：

jQuery(document).ready()

至于无法查看或单击子菜单，这是因为您的 jquery 调用仅在您将鼠标悬停在父元素上时才显示子菜单，这意味着一旦您的鼠标移开它，您就会丢失子菜单。当涉及到菜单和子菜单时，请参考 tea_totaler 的建议并使用 CSS，它对用户来说更容易和更清晰

这是一篇关于命名空间的不错的文章。

如果你坚持使用 jQuery 作为子菜单，你可以使用.toggle函数而不是.showand.hide函数。将其创建为onClick事件而不是mouseenter和/或mouseOver事件。同样，您不会对使用 JS 的菜单获得最大的感觉，建议使用 CSS，但.toggle我认为这将是鼠标事件的一个很好的替代品

这是一个小提琴，您可以使用简单而基本的 CSS 来获得您想要的结果。

于 2012-04-17T04:52:54.963 回答