Javascript 当我们点击该div上的特定链接时，如何显示和隐藏该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的其余部分。如果我单击第二个div，则它将显示其余的第二个div，不会显示其他div

我想要什么

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

图1

---

图2

试试这段代码。我想这就是你想要实现的

$(document).ready(function() {
    $('.bucket .restPart').hide();
    $('.more').show();
    $('.less').hide();
    $('.more').click(function() {
        $('.more').toggle() ;
        $(this).parent().next('.restPart').show();
        $('.less').toggle() ;
    });
    $('.less').click(function() {
        $('.less').toggle() ;
        $(this).parents('.restPart').hide();
        $('.more').toggle();
    });
});

---

您可以使用简单的Javascript（而不是jQuery）实现这种效果

函数showRestPart（）{
var restPart=document.getElementById（'restPart'）；
restPart.style.display='block'；
}
函数hideRestPart（）{
var restPart=document.getElementById（'restPart'）；
restPart.style.display='none'；
}
函数initialiserstpart（）{
var restPart=document.getElementById（'restPart'）；
restPart.style.display='none'；
var showMore=document.getElementById（'showMore'）；
showMore.addEventListener（'click'，showRestPart，false）；
var showLess=document.getElementById（'showLess'）；
showLess.addEventListener（'click'，hiderestart，false）；
}
window.onload=initialiserstpart（）

... 桶的可见部分的内容。。。
... 其余部分的内容。。。
我认为您的问题在于ID。
在一个文件中，两个元素不应具有相同的id

除此之外，您的代码似乎很好（或多或少）

以及HTML：

<section id="grid_content">
    <!--1st div generated by dynamically -->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
    <!--2nd div generated by dynamically-->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
    <!--3rd div generated by dynamically-->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
</section>


名称：
地址：
作业：
资格：
学院：
国家+：
名称：
地址：
作业：
资格：
学院：
国家+：
名称：
地址：
作业：
资格：
学院：
国家+：
什么是
#showRest
？@saru95，感谢您的回复，#showRest是链接的id，当我们点击它时，它将显示div的剩余部分。它不工作，不工作，您的javascript只隐藏，其余的第一个div和其他div没有隐藏其余部分。我还单击了show rest部分，我显示了rest部分，但是，我删除了链接show less部分，它用于隐藏其余部分。是的，但是Inain，让我告诉你你的工作代码，1。当第一次页面隐藏时，它只隐藏一个div，但其他div不隐藏其余部分，2。当我点击show more时，它会显示第一部分的其余部分，但它也会强制其他部分的其余部分。我明白了，你在说什么。试试这个。我想要的是，我有多个div，当页面第一次加载时，每个div都会隐藏其余部分。每个div都分为两个部分，其中一部分始终显示，其余部分不显示。只有当我们单击“显示此内容”链接时，当我们div还有一个“显示较少”链接时，它才会出现，当我们单击该链接时，它将隐藏其余内容。3.这应该只适用于我们正在点击的一个div，其他div应该不知道。我已经给出了我的最后一个镜头。试试看。请对不起，如果它不起作用！谢谢你的回答，在你的回答中你只有一个div，但我有不止一个div是的，为了一个简单的例子，我的答案中只有一个div。你想从这里拿走还是需要更多的帮助？我想这应该是你想要的
<section id="grid_content">
    <!--1st div generated by dynamically -->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
    <!--2nd div generated by dynamically-->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
    <!--3rd div generated by dynamically-->
    <div class="bucket">
        <ul>Name: </ul>
        <ul>Address: </ul>
        <ul>Job:</ul>
        <a href="#" class="more">Show More.</a>
        <!--Below is the rest part when we click on the above link, Showrest it will show-->
        <div class="restPart">
            <ul>Quealification: </ul>
            <ul>College: </ul>
            <ul>Country+:</ul>
            <a href="#" class="less">Show Less.</a>
        </div>
    </div>
</section>