javascript - 如何显示和隐藏特定的 div？

Question

所有的 div 都是动态生成的，并且具有相同的类 class="bucket"。这个 div 在 class="restPart" rest 部分还有一个 div，当页面第一次加载时，它会隐藏。

我想要的，我有不止一个div，
1. 每个 div 隐藏其余部分，当页面加载第一次时。
2. 每个div分为两部分，一部分一直显示，一部分不显示。
3.只有当我们点击“显示更多”链接时才会出现其余部分，
4. 当div完全显示时会显示链接"show less"，当我们点击它时，会隐藏其余部分。
5. 这应该只适用于我们正在点击的一个div，其他div 应该不知道。

_data_grid.html

<script language="javascript" type="text/javascript">
$(document).ready(function(){   
   $("#restPart").hide();
    $('#grid_content').on('click','.more', function(){
        //$("#restPart").show();
         $("div").children("div").show();
         $("#showRest").hide();

    });
    $('#grid_content').on('click','.less', function(){
        //$("#restPart").hide();
        $("#showRest").show();
         $(this).closest("div").hide();
    });
});
</script>

#grid_content {
    overflow: hidden; clear: both;
  }
  #grid_content .bucket {
    width: 290px; float: left; margin: 0 0 48px 20px;
    border: 1px solid #262626;
     background: $gray-lighter;

  }



  #grid_content .bucket ul {
    margin: 0 0 0 0; padding: 0 0 0 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
    <!--1st -->
    <div class="bucket">

        ... Content of visible part of bucket...                
        <a href="#" class="more" id="showRest">Show More.</a>
            <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart" id="restPart">
            ... Content of Rest Part and click on the Show Less It will hide this div...
            <a href="#" class="less" id="showless">Show Less.</a> 
        </div> 

    </div>


    <!--2nd -->
    <div class="bucket">

        ... Content of visible part of bucket...                
        <a href="#" class="more" id="showRest">Show More.</a>

        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart" id="restPart">

            ... Content of Rest Part and click on the Show Less It will hide this div...

            <a href="#" class="less" id="showless">Show Less.</a> 
        </div> 

    </div>
</section>

我想要什么

如下图中，会动态生成更多的div，之前会全部隐藏，当我点击第一个div时显示其余内容，但rest不会显示，请看图2，

图1

图2

Answer 1

正如其他人所说，删除重复的 ID。

从你的形象来看，
您的按钮 Show more，(单击后 - 显示内容)变为:Show less 所以...

• 更改按钮文本(因此使用单个切换按钮!)
• 切换/滑动上一个 DIV

$(function() { // DOM is now ready

    $("#grid_content").on("click", ".toggle", function(evt) {
      evt.preventDefault();    // Prevent window following #hash / jump
      var more = $(this).text() === "Show More";
      $(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
    });

});

.bucket {
  width: 290px;
  float: left;
  margin: 0 0 48px 20px;
  border: 1px solid #262626;
  background: lightgray;

}
.restPart{
  overflow:auto;
  display:none; /* hide initially */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="grid_content">

  <div class="bucket">
    <p>Visible part....</p>
    <div class="restPart">
      <p>Content...</p>
    </div> 
    <a href="#" class="toggle">Show More</a> 
  </div>

  <div class="bucket">
    <p>Visible part....</p>
    <div class="restPart">
      <p>Content...</p>
    </div> 
    <a href="#" class="toggle">Show More</a> 
  </div>

</section>