Изменение триггера jQuery SlideToggle - PullRequest
Новая
       32

Изменение триггера jQuery SlideToggle

0 голосов
/ 02 марта 2012

Я хочу добиться чего-то вроде этого: http://community.invisionpower.com/forum/1-news-and-information/ - при наведении указателя мыши на темы появится стрелка справа, а при щелчке по ней отобразится сводка, а значок стрелки изменится назначок закрытия.

Пока что я сделал это: http://jsfiddle.net/hfq4U/. Что сделано, так это то, что когда я наведите курсор на контейнер заголовка, он показывает «Показать сводку» (через CSS ) и щелчок по нему переключит сводку.

Моя проблема сейчас в том, что я не знаю, что поставить ( или логику, стоящую за ним ), чтобы при нажатии«Показать сводку», она изменится на «Скрыть сводку» и останется там, даже если моя мышь покинет контейнер заголовка. Эта ссылка показывает именно то, чего я хочу достичь.

Любая помощь очень ценится.Кстати, я не хочу использовать плагин только для этой функциональности.

Ответы [ 2 ]

1 голос
/ 02 марта 2012

Это ваш правильный код. 

    jQuery(document).ready(function($) {
    $('.toggler').click(function() {
        $('.summary').not($(this).prev()).slideUp();
        $(this).prev('.summary').slideToggle('slow');
    });
});

Измените это тоже .. 

jQuery(document).ready(function($) {
    $('.toggler').click(function() {
        var _currentext = $('.toggler').html();
        if(_currentext == "Show Summary") {
            $('.toggler').html("Hide Summary");
        } else {
            $('.toggler').html("Show Summary");
        }
        $('.summary').not($(this).prev()).slideUp();
        $(this).prev('.summary').slideToggle('slow');
    });
});

Надеюсь, у вас все хорошо ..

0 голосов
/ 13 марта 2012

Ваш HTML 

<div class="articles">
    <h3>Article Title 1</h3>
    <div class="summary">
        This is the summary for Article 1.
    </div>
    <span class="static" style="display:none;">Show Summary</span>
    <span class="toggler">Show Summary</span>
</div>

<div class="articles">
    <h3>Article Title 2</h3>
    <div class="summary">
        This is the summary for Article 2.
    </div>
    <span class="static" style="display:none;">Show Summary</span>
    <span class="toggler">Show Summary</span>
</div>

<div class="articles">
    <h3>Article Title 3</h3>
    <div class="summary">
        This is the summary for Article 3.
    </div>
    <span class="static" style="display:none;">Show Summary</span>
    <span class="toggler">Show Summary</span>
</div>

<div class="articles">
    <h3>Article Title 4</h3>
    <div class="summary">
        This is the summary for Article a.
    </div>
    <span class="static" style="display:none;">Show Summary</span>
    <span class="toggler">Show Summary</span>
</div>

<div class="articles">
    <h3>Article Title 5</h3>
    <div class="summary">
        This is the summary for Article 5.
    </div>
    <span class="static" style="display:none;">Show Summary</span>
    <span class="toggler">Show Summary</span>
</div>

Ваш JQuery .. 

jQuery(document).ready(function($) {
    $('.toggler').click(function() {
        var _currentext = $('.toggler').html();
        if(_currentext == "Show Summary") {
            $('.toggler').html("Hide Summary");

            $('.static').hide();       
        } else {
            $('.toggler').html("Show Summary");
            $('.static').html("Hide Summary");
             $('.static').show();            
        }

        $('.summary').not($(this).prev()).slideUp();
        $(this).prev('.summary').slideToggle('slow');
    });
});

Текст появится под заголовком артикула. Сделайте размещение с вашим CSS сейчас.

...