Javascript 如何使特定div可见和隐藏？

所有div都是动态生成的，并且具有相同的类

class=“bucket”

。这个div在

class=“restPart”

restPart中还有一个div，当页面第一次加载时，它将被隐藏

我想要的是，我有多个div，
1.第一次加载页面时，每个divs隐藏其余部分 2.每个div分为两部分，一部分将始终显示，其余部分将不显示
3.只有当我们单击链接“显示更多内容”时，才会显示剩余部分，
4.当div完全显示时，它将显示链接“显示较少的内容”，当我们单击它时，它将隐藏其余部分。
5.这应该只适用于我们正在单击的一个div，其他div应该不知道

\u data\u grid.html

$（文档）.ready（函数（）{
$（“#restPart”）.hide（）；
$（“#网格内容”）。在（'click'，'more'，函数（）上{
//$（“#restPart”）.show（）；
$（“div”）.children（“div”）.show（）；
$（“#showRest”）.hide（）；
});
$（“#网格内容”）。在（'click'，'less'，函数（）上{
//$（“#restPart”）.hide（）；
$（“#showRest”）.show（）；
$（this.closest（“div”）.hide（）；
});
});

#网格内容{
溢出：隐藏；清除：两者；
}
#网格内容。桶{
宽度：290px；浮动：左侧；边距：048px20px；
边框：1px实心#262626；
背景：浅灰色；
}
#网格内容。桶ul{
边距：0；填充：0 10px；
}
... 桶的可见部分的内容。。。
... 其余部分的内容，并点击显示较少，它将隐藏此分区。。。
... 桶的可见部分的内容。。。
... 其余部分的内容，并点击显示较少，它将隐藏此分区。。。

我想要什么

在类似的下图中，将动态生成更多的div，之前所有div都将隐藏，当我单击第一个div时，显示其余内容，但rest将不显示，请参见图2

图1

---

图2

首先，您的命名策略有点错误。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>

更新1:在示例中添加了两个桶

更新2:

---

更新3:如其他人所述，保留一些内容

，删除重复的ID

从你的形象判断，
您的按钮

显示更多

，（单击后-显示内容并）变为：

显示更少

，因此

• 更改按钮文本（因此使用单个切换按钮！）
• 切换/滑动上一个DIV

$（function（）{//DOM现在准备就绪
$（“#网格内容”）。在（“单击”，“切换”，功能（evt）{
evt.preventDefault（）；//防止窗口跟随#散列/跳转
var more=$（this）.text（）==“显示更多”；
$（this）.text（more？“Show Less”：“Show more”）.prev（“.restPart”）.slideToggle（）；
});
});
.bucket{
宽度：290px；
浮动：左；
利润率：0.48px 20 px；
边框：1px实心#262626；
背景：浅灰色；
}
restPart先生{
溢出：自动；
显示：无；/*最初隐藏*/
}

可见部分

内容

可见部分

内容

您的jQ甚至可以简化为单个功能。另外，AFAICS您的事件只有一种方式，当然，它甚至可以简化为一行：）这样（我认为/希望）对OP.Kalle Volkov更具可读性。@Kalle Volkov，感谢您的回复，是的，我知道，但是如果您的div是动态生成的，您如何处理上述条件，我们不能为相同功能的每个div编写单独的JAVAScript…@NeelabhSingh-对不起，我不理解你的评论。按照我描述的方式，它适用于第页的每个bucket div。逻辑被封装到每个桶容器中。我将在一分钟内编辑/更新示例。@Kalle Volkov感谢您的回答，您的代码运行良好，但当我单击“显示更多”时，它会隐藏以前的内容。我想要的是，假设之前它将显示4个项目列表，但当我单击“显示更多”时，它将显示整个列表，包括“上一个”，但您的代码隐藏了“上一个”。@Cristik，谢谢您的回复，我没有收到您的回复，我想我会告诉整个senario。。谢谢您的代码与我想要的相同，您的代码正在工作，但在我的系统上也不起作用。@neelabhsingh这可能是因为您需要将jQuery包装到一个DOM就绪函数
$（function（）{/*code here*/}）
@neelabhsingh将来，当您看到答案不提供DOM就绪功能时，您可以在页面顶部使用您的
（您通常应该将JS放在关闭
标记！！）这意味着您应该这样做：）@neelabhsingh同时，确保您的文本完全是“显示更多”。如果不是，那么您也必须在JS中对其进行逻辑上的修改。@Roko C.Buljan，您的代码正在工作，但相同的代码在我的系统中不工作。。
$(".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();
});