javascript - 使用 jQuery 切换宽度和高度

Question

我的网站上有一个图标，如果单击它会显示一个下拉菜单。我想给这个图标添加另一个属性来切换它的宽度和高度。我试过下面的代码，但不幸的是它不起作用。

    $ (".menu_icon").click(function() {

    var iconWidth;
    var iconHeight;

    $ ("#dropDownMenu").toggle(600);

    if ($(".menu_icon").width() == "30px") {
      iconWidth = "15px";
      iconHeight = "15px";
    } 
    else {
      iconWidth = "30px";
      iconHeight = "30px";
    }
    $(".menu_icon").animate({ width: iconWidth });
    $(".menu_icon").animate({ height: iconHeight });

  });

.menu_icon 的 CSS 属性:

 .menu_icon  {
    float: left;  
    margin-top: 7px;  
    display: inline-block;
    background-image: url(..url to icon image);
    padding: 10px;
    height: 15px;
    width: 15px;
    background-size: cover;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;    
}

单击图标时，它会将其宽度和高度切换为 30px；但是，即使第二次单击它也会保持此大小。非常感谢

Answer 1

.width()返回一个数值，而不是一个字符串值所以

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.

if ($(".menu_icon").width() == 30) {
}