javascript - 如何通过单击按钮显示隐藏的 div 部分

Question

css file
    .middle-section2{
    display: none;
        }
   .middle-section2-area{
    position: absolute;
    left: 250px;
    top: 1600px;
    width: 1000px;
    height: 300px;
    background-color: #aaaaaa;
    border: 2px hidden;
    padding: 10px;
      }

  .middle-section2-name{
    position: absolute;
    left: 650px;
    top: 1500px;
    width: 200px;
    height: 40px;
    background-color: #aaaaaa;
    border: 2px hidden;
    padding: 10px;
      }

  .middle-section2-edit{
    position: absolute;
    left:850px;
    top:1485px;
      }

  .middle-section2-edit img{
    width: 20px;
    margin: 5px;

      }

Js文件

  $(function() {
        $("#middle-section2").hide();
        $("#btn").click(function(event) {
            event.preventDefault();
            $("#middle-section2").toggle();
        });
    });

HTML文件

div class="middle-section2">
  <div class="col-lg-12">
    <div class="container-fluid">
      <div class="middle-section2-name">
      </div>

      <div class="middle-section2-edit">
        <%= image_tag 'settings-logo.png'%>
      </div>

      <div class="middle-section2-area" >
        <p>carosel</p>
      </div>

    </div>
  </div>

<div class="button-field">
    <div class="col-lg-12">
      <div class="container fluid">
    <button class="button"  id="btn">+</button>
      </div>
  </div>
  </div>

我是 Rails 的新手，我想通过单击按钮显示隐藏的 div 部分。我用这段代码试过了。但它仍然不起作用。我知道他们有一些小问题。但还是找不到。控制台没有显示错误。但它不起作用请帮助我让它工作

Answer 1

尝试将 #middle-section2 更改为 .middle-section2

      $(function() {
        $(".middle-section2").hide();
        $("#middle-section2").hide();
        $("#btn").click(function(event) {
            event.preventDefault();
            $(".middle-section2").toggle();
        });
    });

.middle-section2{

width:120px;
height:150px;
display:inline-block;
background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="middle-section2"></div>

<button id="btn">toggle</button>