我对jQuery有点陌生，在连接我的点击事件时遇到一些问题。如果我输入 alert('');我可以看到 menu.js 被正确引用，但是当我 alert从里面.ready()函数警报永远不会被触发...
JSFiddle:Click Here
有人可以指出我的问题吗？谢谢!
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Demo</title>
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="Content/MenuDemo.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<img id="navbar-logo" src="Content/images/ingr_logo.png" class="ui-button-icon-primary">
<img id="navbar-logo" src="Content/images/smaller.png" class="image-right">
</div>
<div id="menu1" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img id="expand1" src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img id="drag1" src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img id="close1" src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu2" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu3" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu4" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<!-- Scripts-->
<script src="Scripts/libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/libs/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="Scripts/site/menu.js" type="text/javascript"></script>
</body>
</html>
菜单.js
/// <reference path="../jquery-2.1.1.js" />
/// <reference path="../jquery-ui-1.10.4.js" />
// Make Menus Draggable
function makeMenusDragHandler() {
$('.locked').click(function () {
$('.floating-menu').draggable();
});
}
// Collapse/Expand Height of Navbar
function smallBigNavbarHandler() {
$('.image-right').click(function () {
var navbar = $('.navbar');
navbar.height(navbar.height() === 51 ? 30 : 15);
});
}
$(document).ready(function ($) {
// add handlers
smallBigNavbarHandler();
makeMenusDragHandler();
// setters
});
最佳答案
您有两个问题:
- 您没有包含 jQuery
- 见下文
这一行:
navbar.height = navbar.height() === 51 ? 30 : 15;
应该是:
navbar.height(navbar.height() === 51 ? 30 : 15);
设置者是:
.height(value)
而不是
.height = value
关于javascript - jQuery 函数永远不会在 .ready() 上执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23967047/