打开/关闭带有外部内容的多个div

我试图创建一个组合框，单击“阅读更多”时加载外部内容。加载外部内容正常工作，并且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'); 
}); 
});

来源

2013-05-14 Knut Sorknes

分享您的代码在这里http://jsfiddle.net/ – 2013-05-14 13:27:24

这里的小提琴：http://jsfiddle.net/sorknes/f8Dfb/ – 2013-05-14 13:42:30

好像你比你做更多需要何时＃组合内容可见。也许试试这个：

http://jsfiddle.net/isherwood/f8Dfb/3

#portfolio-content { 
    display: none; 
} 

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

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

来源

2013-05-14 14:11:40 isherwood

更新修复CSS。 – isherwood 2013-05-14 14:13:29

再次更新以修复高度动画。 – isherwood 2013-05-14 14:17:10

我只在第三个项目中看到+按钮，并且布局看起来破损。火狐/ Win7的。 – isherwood 2013-05-14 14:31:46

打开/关闭带有外部内容的多个div

回答

相关问题