Question

好的继承我的问题，我已经下载了一个模板并在其中插入了jQuery。这是行不通的。但是，当我在一个不同的项目上测试时，它的工作。继承了我项目中的部分代码，

<head>
<title>School Website</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/TableCSSCode.css" type="text/css" />
<script type="text/javascript" src="js/mootools-release-1.11.js"></script>
<script src="js/dropDownMenu.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
</script>
</head>
<body>
    <?php include_once'config/connect.php';// database connection...?>
    <div id="container">
        <div id="wrapper">
            <div id="top">
                <div class="logo"><a href="http://all-free-download.com/free-website-templates/"><span>SCHOOL</span> NAME</a></div>
                    <ul class="login">
                        <li class="left">&nbsp;</li>
                        <li>Hello Parents!</li>
                        <li>|</li>
                        <li>Login</li>
                        <li>|</li>
                        <li><a href="http://all-free-download.com/free-website-templates/">Register</a></li>
                    </ul>
  <div id="flip">
    <h1>hello world</h1>
  </div>
  <div id="panel">
    <h1>hello world</h1>
  </div>
</div>

我已经在程序的最后部分对2个问候世界进行了测试。我的代码有什么问题吗？非常感谢您的帮助。我正在使用mozilla firefox 27.0.1

Answer 1

可能Mootools和jQuery之间存在冲突，因为他们都使用$，尝试将您的代码置于闭包中：

// Disable the $ global alias completely
jQuery.noConflict();

(function($){
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
})(jQuery);

此外，slideDown仅适用于隐藏元素，因此您需要首先通过css或jQuery隐藏#panel

#panel {
    display: none;
}

或：

$('#panel').hide();

最终代码应如下所示：

// Disable the $ global alias completely
jQuery.noConflict();

(function($){
    $(document).ready(function(){
        $("#panel").hide();

        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
})(jQuery);

Answer 2

mootools和jQuery之间可能存在冲突
如果该元素已经可见，则向下滑动将无效，请尝试使用slideToggle（）来切换可见性

尝试

jQuery(function ($) {
    $("#flip").click(function () {
        $("#panel").slideToggle("slow");
    });
});

jQuery无法在免费下载的模板中工作

2 个答案: