jQuery：更改父級div寬度時更改類或圖像大小

我有一個位於導航（nav）元素中的徽標圖像，我希望該徽標圖像在導航寬度縮小時更改爲較小的大小。什麼是最好的和簡單的jQuery的功能呢？jQuery：更改父級div寬度時更改類或圖像大小

<nav id="nav"> 
<a href="#" class="logo"></a> 
<ul> 
    <li><a href="#" class="btn home"><div class="menu-item"><span>01</span> home</a></div> <div class="hr-line"></div></li> 
    <li><a href="#" class="btn about"><div class="menu-item"><span>02</span> about</a></div> <div class="hr-line"></div></li> 
    <li><a href="#" class="btn brands"><div class="menu-item"><span>03</span> brands</a></div> <div class="hr-line"></div></li> 
    <li><a href="#" class="btn contact"><div class="menu-item"><span>04</span> contact</a></div> <div class="hr-line"></div></li> 
</ul>

所以當NAV＃NAV降低到60像素寬度，所述.logo類將切換到.logo小類。

來源

2014-02-26 user3096469

您在尋找https://api.jquery.com/resize/的功能。在回調函數中，您可以對要檢查的元素使用.width()函數，如果需要，可以調用.addClass()將CSS類添加到徽標。

來源

2014-02-26 18:58:01

給Lorenzo S添加例子答案。您可以使用resize()函數檢查導航寬度更改，並使用removeClass()刪除原始類，並使用addClass()將新類添加到錨點元素。試試這個：

$(window).resize(function() { 
    var widthNav = $("nav#nav").width(); 
    if(widthNav<60){ 
     $("a.logo").removeClass("logo").addClass("logo-small"); 
    }else{ 
     $("a.logo").removeClass("logo-small").addClass("logo"); 
    } 
});

DEMO

來源

2014-02-26 19:03:30 Unknown

jQuery：更改父級div寬度時更改類或圖像大小

回答

相關問題