jQuery - SlideToggle, прокрутка страницы кнопкой закрытия? - PullRequest
Новая
       5

jQuery - SlideToggle, прокрутка страницы кнопкой закрытия?

0 голосов
/ 06 января 2012

Я новичок в jQuery. Я использую .slideToggle, чтобы DIV отображался внизу всего моего контента. У меня есть код для отображения DIV и страница для перехода к этому DIV.

Однако я хочу создать дополнительную кнопку / ссылку, которая затем будет скрывать содержимое и прокручивать обратно.

Код, который я получил, позволяет мне делать все это, но только с одной ссылкой, которая переключает показ и скрытие, что не очень полезно, так как мне нужна ссылка скрытия, чтобы быть внизу всего моего контента сейчас.

Пожалуйста, дайте мне знать, если у вас есть идеи, как это сделать.

Код jQuery 

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200);
    return false;
}, function() {
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200);
    return false;
});

HTML 

<div style="height: 300px; border: solid 1px #ddd;">I'm using space!</div>
<div class="donate done">
    <h3 class="more"><a href="#" title="More"> More </a></h3>
</div>
<div id="slickbox">
    <div id="slide_show">
        <div id="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="close">
    <h3 class="more"><a href="#" title="More">Close</a></h3>
</div>

Вот пример того, что я получил до сих пор: http://jsfiddle.net/eMYJx/47/

Когда вы нажимаете кнопку «больше», все падает и прокручивается так, как я хочу. Но когда вы нажимаете кнопку закрытия, вы должны нажать ее дважды. Есть какие-нибудь идеи по поводу этого?

1 Ответ

1 голос
/ 06 января 2012

Я бы сделал это так.Используйте одну ссылку, которую вы переключаете между Больше / Закрыть.Я использую анимационный обратный вызов для переключения.

http://jsfiddle.net/eMYJx/49/

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    var $this = $(this);
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200, function() {
         $this.html('Close');
    });     
    return false;
}, function() {
    var $this = $(this);
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200, function(){
        $this.html('More');
    });
    $(this).html('More');
    return false;
});

В качестве альтернативы, если вы хотите сохранить обе кнопки, вы бы привязали отдельные обработчики к каждой.Оба для щелчка, но один «больше» будет выполнять первую часть вашего кода переключения, а «закрыть» будет выполнять вторую половину.

...