Question

我的Jquery-Code有些麻烦，我不明白为什么......

我正在尝试构建垂直下拉列表的导航：

主导航已经有一个脚本，一个可用的翻转图像，对于内容的Ajax调用也是如此...

无论如何，我尝试使用自编代码：这是我的Jquery-Code：

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>

有人可以帮我解决这个问题吗？谢谢

Answer 1

我认为你的意思是.，而不是#中的$(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();
});

编辑：同时检查您的标记，您正在寻找.submenu .find() ul.submenu但<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>不是李的孩子实际上是在同一个DOM级别（.siblings（）可以在这里工作），所以为了获得更正确的标记，你应该在li里面嵌套ul，而不是在ul里面嵌套ul。然后你可以使用我上面写的代码。像这样：

{{1}}

Demo（你需要修复css ......）

我的Jquery-Sub导航代码有些麻烦

1 个答案: