切換CSS以及顯示/隱藏的jQuery

我已經得到的代碼工作，使其切換顯示/隱藏，也改變CSS元素此位...切換CSS以及顯示/隱藏的jQuery

我想它改回來了：用切換懸停狀態。那可能嗎？

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

我該怎麼做？我需要改變什麼？

我已經基本上將這些代碼從文檔和在線資源中散列在一起。所以不知道該怎麼做才能讓它正常工作。我對jquery有點新鮮。

來源

2012-02-05 Stuart Robson

從'border'屬性中刪除'§'.. – 2012-02-05 09:48:14

好的，我該怎麼做？ :) – 2012-02-05 09:48:40

呃，打開您的文本編輯器，將插入符號移至第5行的末尾，返回一個字符，然後按退格鍵。 – 2012-02-05 09:49:48

這就是你想要的嗎？

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

});

來源

2012-02-05 09:58:44

聽起來像.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。

來源

2012-02-05 09:56:01

切換CSS以及顯示/隱藏的jQuery

回答

相關問題