Jquery 在加载外部内容的情况下打开/关闭多个div

我正在尝试创建一个公文包，当点击“阅读更多”时加载外部内容。 加载外部内容效果很好，div将按其应有的方式设置动画。当我点击另一个“阅读更多”链接时，我甚至可以关闭和打开同一个div

我的问题是，当我点击同一个“阅读更多”链接时，div不会关闭，它只会设置动画并再次加载外部内容

我希望这是有意义的

我的HTML如下所示：

<div id="portfolio-content"></div>
            <div id="isotope-container">
                <div class="element webdesign">
                    <header>
                        <h3>Test title: Webdesign</h3>
                    </header>
                    <img src="images/test_img_01.jpg" alt="" title=""/>
                    <ul class="meta clearfix">
                        <li>Filter:</li>
                        <li><a href="" title="Webdesign">Webdesign</a></li>
                    </ul>
                    <div class="read-more">
                        <a href="portfolio-pages/page_1.html" title="Read more &rarr;" class="more">Read more &rarr;</a>
                    </div>
                </div>
                <div class="element advertisement">
                    <header>
                        <h3>Test title: Advertisement</h3>
                    </header>
                    <img src="images/test_img_02.jpg" alt="" title=""/>
                    <ul class="meta clearfix">
                        <li>Filter:</li>
                        <li><a href="" title="Advertisement">Advertisement</a></li>
                    </ul>
                    <div class="read-more">
                        <a href="portfolio-pages/page_2.html" title="Read more &rarr;" class="more">Read more &rarr;</a>
                    </div>
                </div>
            </div>

测试题目：网页设计

过滤器：


测试题目：广告

过滤器：

我的jQuery是：

$(document).ready(function(){
$(".more").click(function(){
    var href = $(this).attr('href');

    if ($('#portfolio-content').is(':visible')) {
        $('#portfolio-content').css({display:'block'}).animate({height:'1px'}).empty();
    }

    $('#portfolio-content').css({display:'block'}).animate({height:'200px'},function(){
        $('#portfolio-content').html('<img class="loader" src="http://dev.push-media.no/final_site/images/loader.gif" alt="">');
        $("#portfolio-content").load(href);
    });

    return false;
});

$(".more").next().click(function(){
    $("#portfolio-content").fadeOut('normal');
});
});

$（文档）.ready（函数（）{
$（“.more”）。单击（函数（）{
var href=$（this.attr（'href'）；
如果（$（'#公文包内容'）。是（':visible'））{
$（'#公文包内容'）.css（{display:'block'}）.animate（{height:'1px'}）.empty（）；
}
$（“#公文包内容”）.css（{display:'block'}）.animate（{height:'200px'}，function（）{
$（“#公文包内容”）.html（“”）；
$（“#公文包内容”）.load（href）；
});
返回false；
});
$（“.more”）.next（）。单击（函数（）{
$（“#投资组合内容”）.fadeOut（“正常”）；
});
});

当公文包内容可见时，你似乎做得比你需要做的更多。也许可以试试这个：

---

在这里分享你的代码这里的小提琴：再次更新，以修复高度动画。我只看到一个+按钮在第三项，布局似乎打破了。Firefox/Win7。请现在重试？我添加了一些CSS来临时修复这个问题。

#portfolio-content {
    display: none;
}

if ($('#portfolio-content').is(':visible')) {
    $('#portfolio-content').slideUp();
}

$('#portfolio-content').css({
    display: 'block', height: '0'
}).animate({
    height: '200px'
}, function () {
...