jquery - 在启用 javascript 而不是 css 显示 :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");
    });
});

这是 fiddle 链接: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 example