如何隐藏和隐藏特定的div？

Question

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

我想要什么，我有一个以上的div，
1.当页面加载第一次时，每个div 隐藏其余部分。
2.每个div分为两部分，一部分总是显示，休息部分不显示。
3.只有当我们点击链接时才会显示休息部分＆＃34; 显示更多＆＃34;，
4.当div完全显示时它将显示链接＆＃34; 显示更少＆＃34;当我们点击它时，将隐藏其余部分。
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 动态，以前所有都会隐藏，但是其他内容不会show，请参阅图2 ，

图1

图2

Answer 1

首先 - 您的命名策略有点不对劲。 HTML文档可以（通过标准）只包含一个具有一个ID的对象 - 这就是ID的目的。因此，您不能拥有id="showRest"或id="restPart"或id="showless"的许多对象。

可能的解决方案解决您的问题。

设计类似

的HTML

<div class="bucket">
  <div class="mininfo">
    <div class="intro">some intro bucket 1...</div>
    <a href="javascript:void(0);" class="showmore">Show more</a>
  </div>
  <div class="maxinfo" style="display: none;">
    <div class="intro">Here is full content 1 of everything</div>
    <a href="javascript:void(0);" class="showless">Show less</a>
  </div>
</div>
<div class="bucket">
  <div class="mininfo">
    <div class="intro">some intro bucket 2...</div>
    <a href="javascript:void(0);" class="showmore">Show more</a>
  </div>
  <div class="maxinfo" style="display: none;">
    <div class="intro">Here is full content 2 of everything</div>
    <a href="javascript:void(0);" class="showless">Show less</a>
  </div>
</div>

接下来，在JavaScript部分中，您可以使用选择器，例如：

$(".bucket .showmore").on('click', function(){
  var $bucket = $(this).parents('.bucket');
  $bucket.find('.mininfo').hide();
  $bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
  var $bucket = $(this).parents('.bucket');
  $bucket.find('.mininfo').show();
  $bucket.find('.maxinfo').hide();
});

更新1：在示例中添加了两个存储桶。

已更新2： example in JSFiddle

已更新3： update in JSFiddle并保留了一些内容

Answer 2

如其他人所述，请删除重复的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>