在啟用javascript而不是css display：block時使用jQuery slideToggle

Question

當鼠標懸停在按鈕上時，我想要一個帶有復選框的div 。 我希望在瀏覽器中啟用javascript執行jQuery代碼。 如果禁用了javascript我已經編寫了用於hover CSS代碼。 但CSS代碼總是覆蓋jQuery代碼。 如何實現我想要的。

html代碼如下

<div id="button_div">
    <button id="hover_button" type="button">Select Options</button>
    <div id="checkbox_div">
        <form>
            <input id="one" type="checkbox" value="one" />
            <label for="one">One</label>
            <br />
            <input id="two" type="checkbox" value="two" />
            <label for="two">Two</label>
            <br />
            <input id="three" type="checkbox" value="three" />
            <label for="three">Three</label>
            <br />
            <input id="four" type="checkbox" value="four" />
            <label for="four">Four</label>
            <br />
        </form>
    </div>
</div>

CSS是

#button_div {
    width: 120px;
}
#hover_button {
    width: 120px;
}
#checkbox_div {
    display: none;
    position: relative;
    top: -26px;
    font-family: Verdana, sans-serif;
    background-color: #EEEEEE;
    width: 200px;
}
#button_div:hover>#checkbox_div {
    display: block;
}

jQuery代碼是

$(document).ready(function () {
    $("#button_div").hover(function () {
        $("#checkbox_div").slideDown("slow");
    });
});

這是小提琴鏈接： http ： //jsfiddle.net/LdzPE/

Answer 1

一種方法是在button_div元素中添加一個類，比如說jscheck 。 然后在您的CSS中，更改規則以定位該新類。

所以將#button_div:hover>#checkbox_div為#button_div.jscheck:hover>#checkbox_div 。

最后，在您的jQuery中，刪除該類。 這樣，如果啟用了JavaScript，則會刪除該類，並且不會應用CSS。 但是，如果JavaScript不可用，則該類保持不變並且CSS正常工作。

jsFiddle例子

Answer 2

別人說的是對的。

基本上你需要將一個類綁定到應用了懸停效果的元素，例如no-js ，並在加載JavaScript時刪除它，如果是的話。

簡單的改變真的。

HTML

<div id="button_div" class="no-js">

JavaScript的

$(document).ready(function () {
    var $btnDiv = $("#button_div");

    $btnDiv.removeClass('no-js');
    $btnDiv.not('.no-js').hover(function () {
        $("#checkbox_div").slideDown("fast");
    });
});

CSS

#button_div.no-js:hover>#checkbox_div {
    display: block;
}

這是一個小提琴 。