在启用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;
}

这是一个小提琴 。