简体   繁体   中英

Expandable list collapse hiding div elements (jQuery)

I've working on a website you can temporarily find here . You'll notice that if you click any of the expandable elements it works perfectly, however when pressing the "collapse all" button the div elements holding the upvote and downvote images disappear from all list items and I can't work out what I'm doing wrong (I'm a jQuery n00b!), js code is as follows:

/* Full list expansion functionality */
$('#expandList')
.unbind('click')
.click( function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
})
/* Full list collapse functionality */
$('#collapseList')
.unbind('click')
.click( function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
})

.children() without a selector selects all children, including the <div> s with the votes.

In your toggle script for the single items, you are using

$(this).children('ul').toggle('medium');
$('.collapsed').children().hide('medium');

This line of code finds all children in this element and hide them, so it includes your div's

Look at the HTML

<ul id="expList">
 <li class="collapsed expanded">
       <div id="upvoted" style="display: inline-block;"><a href="#"><img src="img/votes/upvote.png" alt="upvote" width="14" height="14"></a></div>
      <div id="downvoted" style="display: inline-block;"><a href="#"><img src="img/votes/downvote.png" alt="downvote" width="14" height="14"></a></div> | SNOW KAYAKING
  //You want to hide only this                      
  <ul style="display: block;">

  </ul>
</li>

Look at your code

 /* Full list collapsion functionality */
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

You can change your code to select only the UL element and hide it:

$('.collapsed ul').hide('medium');

OR

$('.collapsed').children().not("#upvoted,#downvoted").hide('medium');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM