переключить CSS, а также показать / скрыть JQuery - PullRequest
Новая
       6

переключить CSS, а также показать / скрыть JQuery

1 голос
/ 05 февраля 2012

Этот бит кода работает так, что он переключает показ / скрытие, а также изменяет элементы CSS ...

Я бы хотел, чтобы он вернул назад состояние: hover с помощью переключателя.Это возможно? 

$("article").click(function () {
    $(".folder-items",this).slideToggle("slow");
    $("article:hover").css({
       background : 'none',
       border : '1px solid #C7C6C7'
    });
 });

Как мне это сделать?Что мне нужно изменить?

Я в основном хэшировал этот код из документации и онлайн-ресурсов.Так что не уверен, что нужно сделать, чтобы все заработало правильно.Я немного новичок в jquery.

Ответы [ 2 ]

0 голосов
/ 05 февраля 2012

Это то, что вы хотите? 

var origBg = $("article:hover").css('background');
var origBorder =  $("article:hover").css('border');

$("article").click(function () {
    $(".folder-items",this).slideToggle("slow");
    if ($("article:hover").css('border')==origBorder)
    {
        $("article:hover").css({
            background : 'none',
            border : '1px solid #C7C6C7'
        });
    }
    else
    {
        $("article:hover").css({
            background : origBg,
            border : origBorder
        });
    }

});
0 голосов
/ 05 февраля 2012

Звучит так, будто .toggleClass() вас удивит.

Определите правила CSS по умолчанию для ваших элементов, а также вспомогательный класс, который переопределяет эти правила.Затем используйте .toggleClass() для включения / выключения этого вспомогательного класса. 

// CSS
article {
    background-image:url(foo.png);
    border-style:none;
}

article.hovering {
   background:none;
   border:1px solid #c7c6c7;
}

// JS (jQuery 1.7.x)
$('article').on('click', function () {
    $(this).toggleClass('hovering')
           .find('folder-items')
                .slideToggle('slow');
});

Но, конечно, вы всегда можете просто оставить переключатели стилей на CSS с целенаправленным правилом article:hover.Обратите внимание, что это не работает со старыми версиями IE.

...