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()返回一个数值，而不是字符串值

.css（width）和.width（）之间的区别在于后者在前者返回无单位像素值（例如，400）返回单位完整的值（例如，400px）。宽度（）当需要在a中使用元素的宽度时，建议使用方法数学计算。

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

Answer 2

您在$（＆＃34;＃menu_icon＆＃34;）中指定ID，尝试在if条件中使用$（＆＃34; .menu_icon＆＃34;）或使用$（this）代替。尝试使用jquery的ON事件。

    $ (".menu_icon").on('click',function() {

      var iconWidth;
      var iconHeight;

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

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

  });

Answer 3

尝试不使用像素：即if ($("#menu_icon").width() == 30)
如果您不需要动画，那么只需尝试切换类即。

//.css file
.fullWidth
{
height:30px;
width:30px;
}

//.jsfile
//no need of if ($("#menu_icon").width() == 30 just use toggle class
$ (".menu_icon").click(function() {

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

    $(".menu_icon").toggleClass('fullWidth');

  });

Answer 4

width（）返回一个数值，因此问题似乎出现在JS代码的第8行。这是您的代码的修改版本（稍微优化）。希望它有所帮助。

$(".menu_icon").click(function() {
    var iconProps = { width: "30px", height: "30px" };
    $ ("#dropDownMenu").toggle(600);

    if ($("#menu_icon").width() >= 30) {
        iconProps.width = '15px';
        iconProps.height = '15px';
    }

    $(".menu_icon").animate(iconProps);
});

使用jQuery切换宽度和高度

4 个答案: