如果窗口寬度小於600，則點擊下拉菜單

我想通過這樣做（我認爲這是JQuery）添加一些CSS代碼到現有的CSS之間切換。

$('#navIt').click(function() { 

    $('#navIt').addClass('.drop', $(window).width() < 600); 

}, function() { 
    $('#navIt').removeClass('.drop', $(window).width() < 600); 
});

我不知道這是否是正確的代碼。我從here和here發現了這個，但它似乎不適用於我。

的Html

<div id="navIt" class="nav"> 
    <ul> 
     <li class="current"><a>Portfolio</a></li> 
     <li><a>Illustration</a></li> 
     <li><a>Web Design</a></li> 
     <li><a>Print Media</a></li> 
     <li><a>Graphic Design</a></li> 
    </ul> 
</div>

CSS

/* nav */ 
.nav { 
    position: relative; 
    margin: 20px 0; 
} 
.nav ul { 
    margin: 0; 
    padding: 0; 
} 
.nav li { 
    margin: 0 5px 10px 0; 
    padding: 0; 
    list-style: none; 
    display: inline-block; 
} 
.nav a { 
    padding: 3px 12px; 
    text-decoration: none; 
    color: #999; 
    line-height: 100%; 
} 
.nav a:hover { 
    color: #000; 
} 
.nav .current a { 
    background: #999; 
    color: #fff; 
    border-radius: 5px; 
} 

/* right nav */ 
.nav.right ul { 
    text-align: right; 
} 

/* center nav */ 
.nav.center ul { 
    text-align: center; 
} 
@media screen and (max-width: 600px) { 
    .nav { 
     position: relative; 
     min-height: 40px; 
    } 
    .nav ul { 
     width: 180px; 
     padding: 5px 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     border: solid 1px #aaa; 
     background: #fff url(images/icon-menu.png) no-repeat 10px 11px; 
     border-radius: 5px; 
     box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    } 
    .nav li { 
     display: none; /* hide all <li> items */ 
     margin: 0; 
    } 
    .nav .current { 
     display: block; /* show only current <li> item */ 
    } 
    .nav a { 
     display: block; 
     padding: 5px 5px 5px 32px; 
     text-align: left; 
    } 
    .nav .current a { 
     background: none; 
     color: #666; 
    } 

    /* right nav */ 
    .nav.right ul { 
     left: auto; 
     right: 0; 
    } 

    /* center nav */ 
    .nav.center ul { 
     left: 50%; 
     margin-left: -90px; 
    } 

} 

@media screen and (max-width: 600px) { 
    /*on click hover */ 
    .drop ul { 
     background-image: none; 
    } 

    .drop ul li { 
     display: block; 
     margin: 0 0 5px; 
    } 

    .drop ul .current { 
     background: url(images/icon-check.png) no-repeat 10px 7px; 
    } 
}

最後，我想要做的是，如果窗口大小小於600，我應該能夠在.drop類之間切換。

任何想法如何做到這一點？

來源

2016-03-01 Akshay

當使用addClass或removeClass，你不需要在括號內指定句號（。）。另外，第二個功能是應用於mouseenter-mouseleave事件。你想獲得懸停效果嗎？ – DinoMyte

@DinoMyte我想點擊加載'.drop'類 – Akshay

添加或類似這樣的刪除它，用簡單的if/else

$('#navIt').click(function() { 
    if($(window).width() < 600){ 
    $(this).addClass('drop'); 
    } 

    else{ 
    $(this).removeClass('drop'); 
    } 

});

來源

2016-03-01 00:44:54

它不起作用 – Akshay

你可以在這裏看到簡單的演示：http://jsbin.com/perodo/edit?css,js,output 只是調整輸出窗口的大小，並在元素上單擊。順便說一句，我看不到在您的css –

中定義了「drop」類，它在'@ media'中的css末尾，我嘗試過使用它，但沒有任何反應。 – Akshay

見.addClass（）供參考：https://api.jquery.com/addclass/

其中一個例子應該清楚： https://jsfiddle.net/wdof7fxt/

只是調整你的瀏覽器窗口，你會看到方形變成紅色/白色。調整它以滿足您的需求。

的JavaScript

$(window).on('resize', function() { 
    if($(this).width() > 600) { 
    $('#box').css('background-color', 'white'); 
    } 
    else { 
    $('#box').css('background-color', 'red'); 
    } 
});

來源

2016-03-01 00:55:44

如果窗口寬度小於600，則點擊下拉菜單

回答

相關問題