0

我是这方面的初学者,想知道我是否可以添加这两个值

maxScreenWidth: 480,
menuTitle: 'Menu:'

进入这个脚本。

function DropDown(el) {
    this.mainNav = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.mainNav.on('click', function (event) {
            $(this).toggleClass('active');
            event.stopPropagation();
        });
    }
}

$(function () {

    var mainNav = new DropDown($('#mainNav'));

    $(document).click(function () {
        // all dropdowns
        $('.dropdown-menu').removeClass('active');
    });

});

提前致谢。

  • 此外,这是我应用到我的网站的下拉菜单。

http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html

我试图将此菜单仅应用于电话布局,但无论屏幕尺寸如何,它都会保持其形式。它应该在超过 480 像素时消失,但事实并非如此。

非常感谢你的帮助。

4

2 回答 2

0

如果要添加这些属性,只需像下面这样添加它们:

function DropDown(el, width, title) {
    this.mainNav = el;
    this.maxScreenWidth = width; //added
    this.menuTitle = title; //added
    this.initEvents();
}

现在它们作为可传递参数成为构造函数的一部分

然后,当您调用构造函数时,只需传递这些值应该是什么

$(function () {
    var mainNav = new DropDown($('#mainNav'), 480, 'Menu'); //See, pass them here.

    $(document).click(function () {
        // all dropdowns
        $('.dropdown-menu').removeClass('active');
    });

});
于 2013-03-27T05:47:04.947 回答
0

您可以将此值添加为 Christoper 所写的 DropDown 参数,也可以创建全局变量:

var maxScreenWidth = 480;
var menuTitle = 'Menu:';
function DropDown(el) {
    this.mainNav = el;
    this.initEvents();
}
//...

但是,如果你把它写在你的 js 文件中,其他代码可以访问和更改你的全局变量(它们毕竟是全局的 :)),所以这种技术存在:

(function ($) {
    var maxScreenWidth = 480;
    var menuTitle = 'Menu:';
    function DropDown(el) {
        this.mainNav = el;
        this.initEvents();
    }
    //...
}(jQuery));

在最后一个示例中,您正在创建具有“私有范围”的函数,因此您的“私有”变量无法从其他 js 代码访问。您还应该注意,您无法从应用程序中的其他代码访问 DropDown,只能在此函数中访问。

于 2013-03-27T06:24:16.773 回答