Question

我使用以下模块显示子菜单：

icisSite.fatNav = function(trigger){

    function init() {
        width = 0,
        $mainMenuListEl = $('.nav-SiteNav .nav-list > li'),
        $subNav = $('.subNav > li > ul');
        appendSubNav();
        getWidth();
    };

    function appendSubNav(){
        $subNav.each(function(index){
            index = ++index;
            $(this).appendTo($mainMenuListEl[index]);   
        });    
    };

    function subNavShow(trigger){
        setWidth(trigger);
        trigger.toggleClass('hover');   
    };

    function subNavHide(trigger){
        trigger.toggleClass('hover');
        trigger
        .find('ul')
        .removeAttr('style');
    };

    function getWidth(){
        $mainMenuListEl.each(function(index){
            width += parseInt($(this).outerWidth());
        });

        width = width - 11;
    };

    function setWidth(trigger){
        trigger
        .find('ul')
        .css({'width': width}); 
    };

    return {
        setup: init,
        show: subNavShow,
        hide: subNavHide
    };

}();

icisSite.fatNav.setup();

$('.nav-SiteNav .nav-list > li:gt(0)').hover(function() {
    $this = $(this);
    icisSite.fatNav.show($this);    
},function(e) {
    icisSite.fatNav.hide($this);
});

$('.nav-SiteNav .nav-list > li:gt(0) a').focusin(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .css({'width': icisSite.width});

}); 

$('.nav-SiteNav .nav-list > li:gt(0) a').focusout(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .removeAttr('style');

});

我想重构以适应焦点和焦点事件。由于代码与悬停事件非常相似，但不相同。

除了检查'触发'元素的类型并且想知道是否有更好的方法之外，我不确定如何做到这一点？

我甚至不确定如何检索元素的类型？因此，如果它是悬停，它将返回一个li元素，并将焦点作为一个锚元素。

Answer 1

如果你想测试一个jQuery对象是否可以，你可以简单地使用.is()

if($(this).is('li')){
}

if($(this).is('a')){
}

此外，您可以通过查看event.type

来重构焦点，重点关注一些焦点。

未经过测试，但可能看起来像这样...

$('.nav-SiteNav .nav-list > li:gt(0) a').bind("focusin, focusout", function(event) {
    var $this = $(this);
    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul');

   if(event.type =="focusout"){
     $this.removeAttr('style');
   }
   else
   {
     $this.css({'width': icisSite.width});
   }
});

Answer 2

不会

$(this).get(0).tagName

是获取标记类型的更好方法，而不是

if($(this).is('li')){
}

如何判断触发事件的元素类型

2 个答案: