如何通過單擊按鈕顯示隱藏的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>