Question

我有一个导航（nav）元素中的徽标图像，我想在导航宽度减小时将徽标图像更改为更小的尺寸。什么是最好的和简单的jquery函数呢？

<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减小到60px宽度时，.logo类将切换到.logo-small类。

Answer 1

您正在寻找https://api.jquery.com/resize/功能。在回调中，您可以在要检查的元素上使用.width()函数，如果需要，可以调用.addClass()将CSS类添加到徽标中。

Answer 2

为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

jQuery：更改父div宽度时更改类或图像大小

2 个答案: