Question

我已经使用了这段代码，以便切换显示/隐藏并更改CSS元素......

我希望用切换回更改：悬停状态。这可能吗？

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

我该怎么做？我需要改变什么？

我基本上已将这些代码从文档和在线资源中混合在一起。所以不知道该怎么做才能让它正常工作。我对jquery有点新鲜。

Answer 1

听起来.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');
});

但是，当然，您可以随时将样式切换到具有良好定位的article:hover规则的CSS。请注意，这不适用于旧版本的IE。

Answer 2

这就是你想要的吗？

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
        });
    }

});

切换css以及显示/隐藏jquery

2 个答案: