Открыть/закрыть несколько 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');
});
});

jquery slidetoggle jquery-animate
person Knut Sorknes    schedule 14.05.2013    source источник
comment
поделитесь своим кодом здесь jsfiddle.net   -  person Mahmoude Elghandour    schedule 14.05.2013
comment
Вот скрипка: jsfiddle.net/sorknes/f8Dfb   -  person Knut Sorknes    schedule 14.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, что вы делаете больше, чем нужно, когда отображается #portfolio-content. Может быть, попробуйте это:

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 () {
...
person isherwood    schedule 14.05.2013
comment
Обновлено снова, чтобы исправить анимацию высоты. - person isherwood; 14.05.2013
comment
Я вижу только кнопку + в третьем элементе, и макет кажется сломанным. Файрфокс/Вин7. - person isherwood; 14.05.2013
comment
Пожалуйста, попробуйте еще раз сейчас? Я добавил немного CSS, чтобы временно решить проблему. - person Knut Sorknes; 14.05.2013