"Скрыть контент Показать контент" - PullRequest
0 голосов
/ 25 августа 2011

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

$('div.content').hide();

$('img.contentslide').click(function() {
    $('div.content').toggle(1500,function() {
        if (jQuery.browser.msie) {                          // Lines 15-17 = special treatment for IE, because of  
            this.style.removeAttribute('filter');           // lack of support for ClearType font rendering on items
        }                                                   // being toggled in jQuery.
    });
        if (slideState == 'closed') {
            $('img.contentslide').attr('src','images/hidecontentstd.png');
            slideState = "open";    

        } else {
            $('img.contentslide').attr('src','images/showcontentstd.png');
            slideState = "closed";
        }
});

, где slideState - моя логическая переменная, которая закрыта в DOM ready.

Проблемы, с которыми я сталкиваюсь, связаны с наведением указателя мыши, поэтому при наведении курсора на кнопку появляется изображение СООТВЕТСТВУЮЩЕЕ при наведении (т. Е. При наведении указателя скрытого содержимого, когда слайдстейт открыт, и при показе слайдшоу содержимого, когда слайдшатзакрыто).

Я пытался сделать следующее: http://www.foryourlungsonly.net/2007/10/jquery-image-swap/

Но безуспешно.Я не хочу использовать CSS наведения, пожалуйста.

1 Ответ

0 голосов
/ 25 августа 2011

Вы можете сделать то же самое, что и при выборе правильного изображения с помощью .click(), но вместо этого с событием .hover().

$('img.contentslide').hover( function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedHover.png');
        } else {
            $( this ).attr('src','images/openHover.png');
        }
    },
    function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedNoHover.png');
        } else {
            $( this ).attr('src','images/openNoHover.png');
        }
    }
);
...