Question

我是JQuery的新手，请原谅我，如果这很简单的话。

我有这个功能：

$(function(){
   $("#usermenu-drop").width($("#usermenu").width() + 3);
   $("#usermenu").click(function(){$("#usermenu-drop").toggle();});
});

click工作正常，但动态宽度设置$("#usermenu-drop").width($("#usermenu").width() + 3);永远不会发生。为什么是这样？我已在控制台中运行该行，但它确实有效。

Answer 1

$(function)仅在DOM层次结构加载完成时调用，但不一定是DOM内部的内容（如图像）。

您应该将该函数附加到load处理程序，例如：

$(function(){
   $("#usermenu").click(function(){$("#usermenu-drop").toggle();});
});

$(window).on("load", function() {
   $("#usermenu-drop").width($("#usermenu").width() + 3);
});

Answer 2

我无法真正告诉您的HTML是什么样的，但通常对于带有切换按钮的下拉菜单，我使用CSS包装下拉和切换按钮以及div和样式，这样您就赢了＃39 ; t需要做任何关于布局的JavaScript。

示例小提琴：http://jsfiddle.net/2kPTW/

HTML

<div id="usermenu-wrap">
    <a href="#" id="usermenu-button">Toggle</a>
    <div id="usermenu-dropdown">
        stuff in here
    </div>
</div>

CSS

#usermenu-wrap {
    position: relative;
    width: 200px;
}

#usermenu-button {
    display: block;
    border: 1px solid #ccc;
    height: 30px;
}

#usermenu-dropdown {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 198px;
    border: 1px solid #c00;
    background-color: #fff;
}

JS

jQuery(function($) {
    $('#usermenu-button').click( function() {
        $('#usermenu-dropdown').toggle();
    });
});

Jquery没有被加载调用

2 个答案: