我的Jquery子导航代码出现了一些问题

some trouble whit my Jquery-Sub-navigation code

本文关键字：问题 Jquery 导航 代码 我的      更新时间：2023-09-26

我的Jquery代码有一些问题，我不明白为什么…

我正在尝试构建一个带有垂直下拉菜单的导航：

主导航已经有了一个可以工作的带有滚动图像的脚本，内容的Ajax调用也是如此…

不管怎样，我用自己写的代码试了一下：这是我的Jquery代码：

function nav() {
    $('ul li').mouseover(function() {
        $(this).find('#submenu').show();
    });
    $('ul li').mouseleave(function() {
        $('ul li #submenu').hide();
    });
    $('ul li #submenu').mouseleave(function() {
        $('ul li #submenu').hide();
        ;
    });
};
$(document).ready(function() {
    nav();
});

HTML：

<li><a href="#home"><img class="fadeim" src="themes/menu/home=1.png" data-hoverimg="themes/menu/home=2.png"/></a></li>
    <li><a href="#lager"><img class="fadeim" src="themes/menu/lager=1.png" data-hoverimg="themes/menu/lager=2.png" /></a></li>
   <ul class="submenu">
<li><a href="#">Mashable</a></li>
<li><a href="#">CNET</a></li>
</ul>
    <li><a href="#anlaesseN"><img class="fadeim" src="themes/menu/anlaesse=1.png" data-hoverimg="themes/menu/anlaesse=2.png" /></a></li>
      <ul class="submenu">
<li><a href="#">Mashable</a></li>
<li><a href="#">CNET</a></li>
</ul>
    <li><a href="#images"><img class="fadeim" src="themes/menu/foto=1.png" data-hoverimg="themes/menu/foto=2.png" /></a></li>

有人能帮我解决这个问题吗？感谢

我认为你指的是$(this).find('#submenu').show();中的.而不是#
您没有ID #submenu，只有类.submenu。

更正后的代码应为：

function nav() {
    $('ul li').mouseover(function() {
        $(this).find('.submenu').show();
    });
    $('ul li').mouseleave(function() {
        $('ul li .submenu').hide();
    });
    $('ul li .submenu').mouseleave(function() {
        $('ul li .submenu').hide();
        ;
    });
};
$(document).ready(function() {
    nav();
});

EDIT：还要检查您的标记，您正在寻找带有.find()的.submenu，但ul.submenu不是李的子级。李实际上在同一DOM级别上（.siblings（）在这里可以工作），所以要获得更正确的标记，应该在李中嵌套ul，而不是在ul中嵌套ul。然后你就可以使用我上面写的代码了。像这样：

<li><a href="#lager">lager</a>
    <ul class="submenu">
        <li><a href="http://www.mashable.com">Mashable</a>
        </li>
        <li><a href="http://www.cnet.com">CNET</a>
        </li>
    </ul>
</li>

Demo（您需要修复css…）

相关文章：