Question

我对 jQuery 有点新鲜，我在点击事件时遇到了一些问题。如果我放了一个alert('');我可以看到 menu.js 被正确引用但是当alert函数内的.ready()时，警报永远不会被触发。

有人可以善意指出我的问题吗？谢谢！

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>

menu.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
});

proj struct

Answer 1

您有两个问题：

您没有包含jQuery
见下文

这一行：

navbar.height = navbar.height() === 51 ? 30 : 15;

应该是：

navbar.height(navbar.height() === 51 ? 30 : 15);

setter是：

.height(value)

而不是

.height = value

jQuery函数永远不会在.ready（）上执行

HTML

menu.js

1 个答案: