Question

我正在开设一个您可以暂时找到here的网站。您会注意到，如果您单击任何可扩展元素，它可以完美地工作，但是当按下“全部折叠”按钮时，保存upvote和downvote图像的div元素将从所有列表项中消失，我无法弄清楚我是什么我做错了（我是一个jQuery n00b！），js代码如下：

/* 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');
})

Answer 1

没有选择器的

.children()会选择所有子项，包括带有投票的<div>个。

在单个项目的切换脚本中，您正在使用

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

Answer 2

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

这行代码查找此元素中的所有子元素并隐藏它们，因此它包含div的

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

查看您的代码

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

您可以更改代码以仅选择UL元素并隐藏它：

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

OR

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

可扩展列表折叠隐藏div元素（jQuery）

2 个答案: