试图构建一个按钮来展开列表中的列表答案

【问题标题】：Trying to build a button to expand a list in a list试图构建一个按钮来展开列表中的列表
【发布时间】：2017-08-07 08:39:05
【问题描述】：

我正在尝试构建一个按钮来扩展 div 元素列表中的列表。

$('.expandAllfixVersionList').click(function () {

                $('.fixVersionList').find('.issue').animate({height: $('.fixVersionList').children('.version')[0].scrollHeight}, 500);
                $('.fixVersionList').find('.issue').animate({'overflow': 'visible'}, 500);

            });

在这里我遇到了问题，他显示第一个 fixVersionListElement 正确，并且所有后续都得到相同的高度，即使它们或多或少有问题。所以他们可能会被切断或变得很大。我可以通过他将动画动态处理到正确高度的方式来制作这个吗？

HTML的结构是这样的：

<div class="content">
    <div class="fixVersionList">...</div>
    ...
    <div class="fixVersionList">
        <ul class="issue">
            <li>
            </li>
        </ul>
        <ul class="issue">...</ul>
        ...
    </div>
</div>

【问题讨论】：

在你的问题中加入一个有效的 sn-p
还可以查看 slideToggle()，答案中的示例如下所示

标签： javascript jquery html css

【解决方案1】：

您好，我重新创建了您现有的代码，如果这对您有帮助，请告诉我

$('.expandAllfixVersionList').click(function () {

  $('.fixVersionList').each(function( index, value ) {
  $(value).find('.issue').animate({height: 	$(value).children()[0].scrollHeight}, 500);
  $(value).find('.issue').animate({'overflow': 'visible'}, 500);
 	});
});

.issue{
  height:0px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="expandAllfixVersionList">asads</button>
<div class="content">
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

【讨论】：

非常有帮助，谢谢！就我而言，我还有多个
有不同数量的问题。
@FrankS。这是需要的吗？
仍然遇到同样的问题：第二个 fixVersionList 被切断，因为它更大（有更多问题）。我猜这部分是错误的： $(value).find('.issue').animate({height: $('.fixVersionList').children()[0].scrollHeight}, 500);
我仍然有这个问题，现在当我点击展开按钮时，我只看到一个问题。我还在动画中尝试了父母而不是孩子，但它变得很大。 $(value).children()[0].scrollHeight 寻址哪个元素？
@FrankS。如果没有包含实际问题的 jsfiddle 或 codepen，我只能帮助您达到这个级别。

【解决方案2】：

根据 Naren Murali 的回答，我设法让它与它一起工作：

$('.expandAllfixVersionList').click(function () {

                $('.fixVersionList').each(function( index, value ) {
                    var count = $(this).find('li').length;
                    $(value).find('.issue').animate({height:    $(value).children()[0].scrollHeight*count}, 500);
                    $(value).find('.issue').animate({'overflow': 'visible'}, 500);
                });
            });

我会接受你的回答，非常感谢。

【讨论】：

【解决方案3】：

为了稍微简化代码，您还可以使用 slideToggle()。第一个列表有更多要显示的项目，您不必担心要确定动画的高度。

$('.expandAllfixVersionList').click(function () {

  $('.fixVersionList').each(function( index, value ) {
      $(value).find('.issue').slideToggle();
 	});
});

.issue{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="expandAllfixVersionList">toggle</button>
<div class="content">
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

【讨论】：