如何通过单击按钮显示隐藏的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和的新手，我想通过单击按钮显示hiddene 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>