当我们点击该div上的特定链接时，如何显示和隐藏特定的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>

请看下图，如果我点击第1个div上的显示内容那么它将显示其他的第1个div的其余部分将不显示，如果我点击第2个div然后它将显示休息第二个div，没有其他div会显示。

我想要什么

在下面这些数字中，当我点击第一个div 显示其余内容时，将会生成更多div 动态，以前所有都会隐藏，但是其他内容不会show，请参阅图2 ，

图1

图2

Answer 1

试试这段代码。我认为这就是你想要实现的目标。

li:last-child::before

Answer 2

您可以使用简单的Javascript（而不是jQuery）来实现此效果。

＆＃13;

＆＃13;

function showRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'block';
}

function hideRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
}

function initialiseRestPart() {
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',hideRestPart,false);
}

window.onload = initialiseRestPart();

＆＃13;

<div class="bucket">

... Content of visible part of bucket...

<a href="#" id="showMore">Show More.</a>

<div id="restPart">

... Content of Rest Part...

<a href="#" id="showLess">Show Less.</a> 
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为你的问题与Ids有关。 在文件中，两个元素不应具有相同的ID。

除了你的代码似乎很好，（或多或少）。

$(document).ready(function() {
    $(".restPart").hide();
    $('#grid_content').on('click', '.more', function() {
        $(this).nextAll(".restPart:first").show();
    });
    $('#grid_content').on('click', '.less', function() {
      $(this).closest("div").hide();
    });
});

和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>