Jquery addClass（）方法在頁面加載後工作，但在調整大小後不工作（響應下拉菜單）

所以這是我的響應下拉菜單項目。當我將鼠標懸停在大屏幕上時，子菜單會顯示出來，並顯示我何時單擊小屏幕。當我點擊按鈕以在小屏幕中顯示子菜單時，我使用addClass添加樣式。但問題是代碼在第一次加載時工作正常，但在調整大小後，addClass方法不起作用。任何建議和幫助表示讚賞。這裏是我的jsfiddle鏈接： http://jsfiddle.net/jerrypeng0112/so722nb0/1/Jquery addClass（）方法在頁面加載後工作，但在調整大小後不工作（響應下拉菜單）

這裏是我的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>

來源

2015-04-03 Jery Peng

當您調整它的大小時，再次點擊事件到元素。所以，它會再次發射。您需要刪除原始綁定，如：

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

來源

2015-04-03 15:56:54 Hoyen

是的，那應該可以解決您的問題。 – 2015-04-03 16:00:59

Jquery addClass（）方法在頁面加載後工作，但在調整大小後不工作（響應下拉菜單）

回答

相關問題