当我们点击该div上的特定链接时，如何显示和隐藏特定的div？

Node: Please see the demo
All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.

节点:请参阅演示所有div都是动态生成的,并且具有相同的class class =“bucket”。这个div在class =“restPart”休息部分中还有一个div,当页面加载第一次时它会隐藏。

What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.

我想要的是,我有多个div,1。当第一次加载页面时,每个div隐藏其余部分。每个div都分为两部分,一部分总是显示,休息部分不显示。 3.只有当我们点击链接“显示更多”时才会出现休息部分,4。当div完全显示时会显示链接“显示更少”,当我们点击它时,将隐藏其余部分。这应该仅适用于我们点击的一个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>

Please see the following figure, If I click on show content on 1st div then It will show rest of 1st div on other will not show, If I click on 2nd div then It will show the rest 2nd div, no other div will show.

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

What I want

我想要的是

In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,

在下面的图中,将动态生成更多div,之前所有将隐藏,当我点击第一个div显示其余内容时,其余内容将不显示,请参见图2,

Figure 1

Figure 2

3 个解决方案

#1

Try this piece of code . I think this is what you want to achieve .

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

$(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();
    });
});

#2

You can achieve this effect using straightforward Javascript (rather than jQuery).

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

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();

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

#3

I think your problem is with the Ids. In a file, two elements shouldn't have the same id.

我认为你的问题在于ID。在文件中,两个元素不应具有相同的ID。

Apart from that your code seems fine, (more or less).

除此之外你的代码似乎很好,(或多或少)。

$(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();
    });
});

and the HTML :

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