单击时显示/隐藏子菜单仍有问题

Question

我的小提琴完美地运作Fiddle但是当我将它保存到我的html文件时它不再有效。

您可以在此处查看完整文件Pastebin

<script>
$("#showhide").on('click', function(){
            $(".more").slideToggle();
            return false;
        });

</script>

我在做什么？

Answer 1

在document-ready handler中扭曲您的代码，因为当代码运行时，它将无法在页面中找到“＃showhide”元素：浏览器尚未对其进行解析。

代码的

$(document).ready(function () {
    $("#showhide").on('click', function(){
         $(".more").slideToggle();
         return false;
    });
});

或

使用on

上的委托事件

 $(document).on("click", "#showhide", function () {
      $(".more ").slideToggle();
      return false;
 });

或

在结束body标记之前放置脚本。

<script>
    $("#showhide").on('click', function () {
        $(".more").slideToggle();
        return false;
    });
</script>
</body>
</html>

修改

你的jQuery路径也不正确。使用

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Answer 2

将jquery脚本路径更改为此

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

并将单击功能包装在文档就绪

中

<script>
$(function(){
    $("#showhide").on('click', function(event){
        event.preventDefault();
        $(".more").slideToggle();
        return false;
    });
});
</script>