Question

我试图在点击时展开一个div框，并在再次点击时恢复正常尺寸。看起来很简单，但无论我尝试什么，我都无法工作。我不知道可能出现什么问题，因为错误最有可能发生的代码部分不是很长。谢谢你的时间！
https://jsfiddle.net/uL1r08am/

<div id='panelHolder'>
  <div id='panel1' class='panels'></div>
</div>

.panels {
  position:relative;
  border:2px solid silver;
  transition:transform 1.5s;
}

.panels:hover {
  transform:skewY(3deg);
}

#panel1.clicked{
  width:460;
  height:290;
}

$('#panel1').on('click', function() {
    $(this).toggleClass('clicked');
});

$(document).ready(main)

Answer 1

您遗失px

更改：

#panel1.clicked{
  width:460;
  height:290;
}

致：

#panel1.clicked{
  width:460px;
  height:290px;
}

最终代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <style>
        .panels {
                  position:relative;
                  border:2px solid silver;
                  transition:transform 1.5s;
                }

            .panels:hover {
              transform:skewY(3deg);
            }

        #panel1.clicked{
          width:460px;
          height:290px;
        }
    </style>
</head>
    <body>
        <div id='panelHolder'>
            <div id='panel1' class='panels'>DIV</div>
        </div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#panel1').on('click', function() {  
                $(this).toggleClass('clicked');
            })
        })
    </script>
    </body>
</html>

＆＃13;

Answer 2

尺寸没有变化，因为您的宽度和高度值缺少px。切换本身工作正常。

更新了小提琴：https://jsfiddle.net/uL1r08am/2/

Answer 3

您需要将javascript代码包装在文档就绪函数

中

$(document).ready(function() {
  $('#panel1').on('click', function() {
    $(this).toggleClass('clicked');
  });
})

Answer 4

您可以尝试使用addClass和removeClass

$('#panel1').click(function() {
  if ($('#panel1').hasClass('clicked'))
     $('#panel1').removeClass('clicked');
  else
     $('#panel1').addClass('clicked');
});

.toggleClass不工作，不明白为什么

4 个答案: