为什么Jquery在第二次单击时获取.height并设置动画？

我正试图实现一些能够达到“公文包”持有人ul高度的东西，并在“公文包”内容上应用/制作动画。我的代码正在运行，但它只是在第二次单击时执行操作？我的最后一个想法是宣布一个确切的高度，但是li内容物的高度不同

请帮帮我，我只是一个初学者：（昨晚刚学了变量……也许我的代码有问题

我在li:n子项（4）和（5）上的css被隐藏（这也将在单击“'#公文包持有人li[id^=“缩略图”]”时设置动画（滑动切换）

html

---

向我们展示你的html标记，JSFIDLE会很有帮助，因为这是我的代码，但由于某些原因，FIDLE不允许我单击我的li？谢谢你的帮助！你必须包括jQuery。在这里，我更新了它，你可以看到高度在第二次单击时读取并生效。我更新了你的FIDLE。它在chrome中的第一次单击时起作用

<div id="portfolio_content">
            <div id="portfolio_holder">
                <ul>
                    <li id="thumbnail_bnp"></li>
                    <li id="thumbnail_burnside"></li>
                    <li id="thumbnail_coors"></li>
                    <li id="gallery_bnp" class="large"></li>
                    <li id="gallery_burnside" class="large"></li>
                    <li id="thumbnail_chevy"></li>
                </ul>
            </div>
        </div>

$('#portfolio_holder li[id^="thumbnail_"]').click(function () {
    var uuid = this.id.slice(9);
    $('#' + "gallery" + uuid).slideToggle();   
    $("#portfolio_holder li:nth-child(4),#portfolio_holder li:nth-child(5)").not('#' + "gallery" + uuid).slideUp();
    var totalHeight = $("#portfolio_holder ul").height();
    $("#portfolio_content").animate({'height':totalHeight});
});