尝试使容器 div 在点击时改变高度

Question

我正在尝试制作一个容器 div 通过点击更改设置高度，但我无法让它工作。我不确定我在哪里搞砸了并且会喜欢输入，因为我是 Javascript 的新手。

$(function() {
  $('#menu').click(function() {

        $(".outer").css('height','600px ');
 });
 });

这是一个 JS fiddle: https://jsfiddle.net/r92cc51d/2/

Answer 1

Oki 几个错误：

• 匿名函数未正确关闭。
• 'height'
中缺少单引号
• Fiddle
中没有添加Js

修正代码：

$(function() {
      $('#menu').click(function() {
        $(".outer").css('height', '600px');
      });
})

Updated Fiddle

$(function() {
      $('#menu').click(function() {

        $(".outer").css('height', '600px');
      });
    })

.outer {
  width: 200px;
  height: 200px;
  background-color: #111111;
}

#menu {
  height: 20px;
  width: 20px;
  background-color: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div id="menu">
  </div>
</div>

Answer 2

您的点击功能缺少右括号：

$('#menu').on('click', function() {
    $('.outer').css('height', '400px');
});

.outer {
  width: 200px;
  height: 200px;
  background-color: #111111;
}

#menu {
  height: 20px;
  width: 20px;
  background-color: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div id="menu">
  
   </div>
  </div>

Answer 3

如果您只是想增加点击时的高度，则无需在 JS 中执行此操作。您也可以在 html 中完成。

<div id="outer">
  <div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
  
   </div>
  </div>