jquery 下拉菜單不適用於懸停

Question

我的 jQuery 向下滑動功能不起作用，這是 jquery 代碼

<script src="jQuery/jquery-1.12.4.js" type="text/javascript">
            $(document).ready(function(){
             $("ul.drop > li").hover(function(){
                $(this).find("ul.up").Toggle(550);
             })
            });
        </script>

和 html ：

    <div id ="navMenu">
        <ul class="drop">
            <li><a href = "#">Home</a></li>
            <li><a href = "#">Types</a></li>
            <li><a href = "#">Facts</a>
                <ul class="up">
                    <li><a href = "#">T1</a></li>
                    <li><a href = "#">T2</a></li>
                    <li><a href = "#">T3</a></li>
                    <li><a href = "#">T4</a></li>
                    <li><a href = "#">T5</a></li>
                    <li><a href = "#">T6</a></li>
                </ul>
            </li>
    <li><a href = "#">Contact</a></li>
    </ul>
    </div>

Answer 1

使用一個腳本標簽來加載 jquery，然后使用另一個來內聯 JS。

<script src="jQuery/jquery-1.12.4.js"></script>

<script>
  $(document).ready(function(){
    $("ul.drop > li").hover(function(){
      $(this).find("ul.up").toggle(550);
    })
  });
</script>

另外，正如@anu 指出的，它的.toggle()帶有小寫的“t”。

Answer 2

這是工作示例，

 $(document).ready(function(){ $("ul.drop > li").hover(function(){ $("ul.up").toggle(1000); }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <div id ="navMenu"> <ul class="drop"> <li><a href = "#">Home</a></li> <li><a href = "#">Facts</a> <ul class="up"> <li><a href = "#">T1</a></li> <li><a href = "#">T2</a></li> <li><a href = "#">T3</a></li> <li><a href = "#">T4</a></li> <li><a href = "#">T5</a></li> <li><a href = "#">T6</a></li> </ul> </li> <li><a href = "#">Contact</a></li> </ul> </div>