2

首先，我知道那里有很多教程来展示如何制作下拉列表，但我想用我有限的知识尝试自己制作一个非常简单的教程，我知道我可能正在这样做错了，但我还是想试试。

所以这是我现在的问题，我已经在 html 中设置了 ul 和 li 并且我设置了一个简单的 jquery 代码，当鼠标进入时它将向下滑动子菜单，当鼠标离开时将向上滑动子菜单，但它根本无法正常工作.

代码：

<div style="width:200px; height:400px;">
    <ul id="ul" class="menu" style="border:thin solid #090;">
        <li id="li">Test
        <ul id="ull">
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul> 
        </li>
        <li id="li">Test 2A
            <ul id="ull">
                <li>Test 3A</li>
                <li>Test 4A</li>
            </ul>
        </li>
    </ul>
</div>




    <script>
    $(document).ready(function(){
        $("#ul ul").css({"color":"red","font-size":"30px"}).hide();
    });

    $("#li").mouseenter(function(){
        $("#ull").slideDown(400).show();    
    });

    $("#li").mouseleave(function(){
        $("#ull").slideUp(400).hide(100);
    });

    </script>

所有这一切，都在一个 html 中，我没有使用其他任何东西，expet 一个 CSS 类“菜单”就是这个display:inline-block;

问题是下拉菜单不能正常工作。当我将鼠标移到测试上时，会出现子菜单，但这在测试 2A 中不会发生，而且当下拉列表“下降”时，测试 2A 也会出现在其下方。

我不能轻易解释这个问题，所以我设置了一个jsfiddle来帮助你理解。

再一次，我知道这是不对的，我应该使用其他方式来完成，但我想尝试使用我迄今为止学到的一些东西来制作一个简单的下拉列表。

提前致谢。

4

2 回答 2

1

ID 必须是唯一的。

 <li id="li">Test

 <li id="li">Test 2A

更改为不同的 ID 或使用class

更正的小提琴

并且不要将liandul 作为 Id 或类。这些是保留的关键字。造成混乱。

于 2013-05-30T09:02:27.837 回答
0

在我看来，最好的解决方案是在两个次要 ul 之一更改 id 并在调用它的函数中添加一行。

<div style="width:200px; height:400px;">
    <ul id="ul" class="menu" style="border:thin solid #090;">
        <li id="li">Test
        <ul id="ull">
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul> 
        </li>
        <li id="li">Test 2A
            <ul id="lull">
                <li>Test 3A</li>
                <li>Test 4A</li>
            </ul>
        </li>
    </ul>
</div>




    <script>
    $(document).ready(function(){
        $("#ul ul").css({"color":"red","font-size":"30px"}).hide();
    });

    $("#li").mouseenter(function(){
        $("#ull").slideDown(400).show();    
$("#lull").slideDown(400).show();    
    });

    $("#li").mouseleave(function(){
        $("#ull").slideUp(400).hide(100);
 $("#lull").slideUp(400).hide(100);
    });

    </script>
于 2013-05-30T09:05:34.373 回答