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

我有一个在导航（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小类

您正在寻找该函数。

---

在回调函数中，可以对要检查的元素使用

.width（）

函数，如果需要，可以调用

.addClass（）

将CSS类添加到徽标中。

为Lorenzo的答案添加示例。您可以使用该函数检查导航宽度的变化，删除原始类，并使用该函数将新类添加到锚元素。试试这个：

$(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");
    }
});

$（窗口）。调整大小（函数（）{
var widthNav=$（“nav#nav”）.width（）；
如果（宽度导航）