Question

所以这是我的响应式下拉菜单项目。子菜单显示我悬停在大屏幕上，并在我点击小屏幕时显示。当我点击按钮在小屏幕上显示子菜单时，我使用addClass添加样式。但问题是代码在第一次加载时工作正常，但在我调整大小后，addClass方法不起作用。任何建议和帮助表示赞赏。这是我的JSFiddle链接： http://jsfiddle.net/jerrypeng0112/so722nb0/1/

这是我的Jquery代码：

$(document).ready(function(){
    var navResponsive = function(){
        var w = $(window).width();
        console.log(w);
        if(w>585){
            $('li.dropdown a').off('.click');
            $('li.dropdown').on('mouseenter.hover',function(){
                $(this).find('ul').filter(':not(:animated)').slideDown(400);
            }).on('mouseleave.hover',function(){
                $(this).find('ul').fadeOut(250);
            });
        }else{
            $('li.dropdown').off('.hover');
            $('a#navIcon').on('click',function(e){
                e.preventDefault();
                $('nav').filter(':not(:animated)').slideToggle(400);
            });
            $('li.dropdown a').on('click.click',function(e){
                e.preventDefault();
                if($(this).next('ul').is(':hidden')){
                    $(this).next('ul').filter(':not(:animated)').slideDown(400);
                    $(this).addClass('main_2');
                    $(this).find('span.expand').addClass('expand_2');
                }else{
                    $(this).next('ul').filter(':not(:animated)').slideUp(400);
                    $(this).removeClass('main_2');
                    $(this).find('span.expand').removeClass('expand_2');
                }
            });
        }
    };
    navResponsive();
    $(window).resize(function(){
        navResponsive();
        var w = $(window).width();
        if (w>585){
            $('nav, li.dropdown, li.dropdown ul').removeAttr('style');
        }
    });
});

这是我的CSS代码：

body{
    background:darkgray;
    font-family:Arial,Sans-serif;
    height:2000px;
}
header{
    position:fixed;
    width:100%;
    height:40px;
    top:0;
    background:black;
}
h1{
    font-size:24px;
    display:inline-block;
    color:white;
    line-height:40px;
    height:40px;
    margin-left:8px;
}
nav{
    width:400px;
    height:40px;
    float:right;
}
nav ul{
    list-style-type:none;
    margin:0;
    padding:0;
    float:left;
}
nav ul li{
    display:inline-block;
    float:left;
}
nav ul li a{
    display:inline-block;
    text-align:center;
    text-decoration:none;
    width:80px;
    height:40px;
    line-height:40px;
    background:#404040;
    color:white;
}
ul.hidden{
    display:none;
    position:absolute;
}
ul.hidden li{
    display:block;
    float:none;
}
ul.hidden li a{
    background:;
    width:auto;
    padding:0 20px;
    height:40px;
    line-height:40px;
}
a#navIcon{
    display:none;
}
span.expand{
    display:none;
}
@media screen and (max-width:540px){
    .main_2{
        background:dimgray;
    }
    span.expand_2{
        transform:rotate(45deg);
        top:-10px;
        font-size:24px;
    }
    nav{
        display:none;
        width:100%;
        height:auto;
    }
    nav ul{
        width:100%;
        height:auto;
    }
    nav ul li{
        display:block;
        width:100%;
        height:auto;
    }
    nav ul li a{
        width:100%;
        text-align:left;
        padding-left:20px;
        border-bottom:1px solid black;
    }
    ul.hidden{
        display:none;
        width:100%;
        height:auto;
        position:relative;
    }
    ul.hidden li{
        width:100%;
    }
    ul.hidden li a{
        width:100%;
        padding-left:10%;
    }
    span.expand{
        font-size:20px;
        color:white;
        display:block;
        float:right;
        margin-right:40px;
    }
    a#navIcon{
        display:block;
        float:right;
        margin:8px 10px 0 0;
        font-size:24px;
        color:white;
        text-decoration:none;
    }
}

这是我的HTML代码：

<body>
    <header>
    <h1>SITE TITLE</h1>
    <a href="#" id="navIcon">&#9776;</a>
    <nav>
      <ul id="main">
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#">About<span class="expand">+</span></a>
                <ul class="hidden">
                    <li><a href="#">About 1</a></li>
                    <li><a href="#">About 2</a></li>
                    <li><a href="#">About 3</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#">Services<span class="expand">+</span></a>
                <ul class="hidden">
                    <li><a href="#">Services 1</a></li>
                    <li><a href="#">Services 2</a></li>
                    <li><a href="#">Services 3</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#">History<span class="expand">+</span></a>
                <ul class="hidden special">
                    <li><a href="#">The History 1</a></li>
                    <li><a href="#">The History 2</a></li>
                    <li><a href="#">The History 3</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>
</body>

Answer 1

调整大小时，您再次将click事件绑定到元素。所以，它会再次发射。您需要删除原始绑定，如：

$('li.dropdown a').off('click.click').on('click.click',function(e){

Jquery addClass（）方法在页面加载后工作，但在调整大小后不起作用（响应下拉菜单）

1 个答案: