jquery - 使用 jquery 的下拉列表

Question

未创建所需的下拉效果。请帮忙。提前致谢

jQuery

$(document).ready(function() { 

    $("#navigation ul").mouseenter(
        function(){ $("#navigation li a").fadeIn(); 
    }); 
    $("#navigation ul").mouseleave(
        function(){ $("#navigation li ").fadeOut(); 
    }); 
});

html

<ul class="navigation">
    <li><a href="index.php">First</a>
        <ul class="navigation">
            <li><a href="index.php">First</a></li>
            <li><a href="index.php">Second</a></li>
        </ul>
    </li>
</ul>

Answer 1

您的“导航”作为一个类给出，并且您以 id ($("#navigation")) 的形式访问它。类可以作为 $(".navigation") 访问。尝试这样的代码。

Answer 2

我想这就是你想要做的。在此处尝试演示

HTML

<ul class="navigation">
    <li><a href="index.php">First</a>
        <ul class="navigation_level2" style='display:none'>
            <li><a href="index.php">First</a></li>
            <li><a href="index.php">Second</a></li>
        </ul>
    </li>
</ul>

jQuery

$(document).ready(function() { 

    $(".navigation").mouseenter(
        function(){ $(".navigation_level2").fadeIn(); 
    }); 
    $(".navigation").mouseleave(
        function(){ $(".navigation_level2").fadeOut(); 
    }); 
});