[英]Using jQuery slideToggle when javascript is enabled instead of css display:block
I want a div
with checkboxes to be displayed when mouse is hovered over button. 当鼠标悬停在按钮上时,我想要一个带有复选框的div
。 I want jQuery
code to be executed if javascript
is enabled in browser. 我希望在浏览器中启用javascript
执行jQuery
代码。 I have written CSS
code for hover
as work around if javascript
is disabled. 如果禁用了javascript
我已经编写了用于hover
CSS
代码。 But CSS
code always overrides jQuery
code. 但CSS
代码总是覆盖jQuery
代码。 How to achieve what I want. 如何实现我想要的。
The html
code is as follows 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
is 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
code is jQuery
代码是
$(document).ready(function () {
$("#button_div").hover(function () {
$("#checkbox_div").slideDown("slow");
});
});
This is the fiddle link: http://jsfiddle.net/LdzPE/ 这是小提琴链接: http : //jsfiddle.net/LdzPE/
One way would be to add a class to your button_div element, say jscheck
. 一种方法是在button_div元素中添加一个类,比如说jscheck
。 Then in your CSS, change the rule to target that new class. 然后在您的CSS中,更改规则以定位该新类。
So change #button_div:hover>#checkbox_div
to #button_div.jscheck:hover>#checkbox_div
. 所以将#button_div:hover>#checkbox_div
为#button_div.jscheck:hover>#checkbox_div
。
Finally, in your jQuery, remove the class. 最后,在您的jQuery中,删除该类。 That way, if JavaScript is enabled, the class gets removed and the CSS won't be applied. 这样,如果启用了JavaScript,则会删除该类,并且不会应用CSS。 However if JavaScript isn't available, the class remains and the CSS works. 但是,如果JavaScript不可用,则该类保持不变并且CSS正常工作。
What others have said is correct. 别人说的是对的。
Essentially you need to bind a class to the element that has the hover effects applied to it, eg no-js
, and remove it when JavaScript is loaded, if it does. 基本上你需要将一个类绑定到应用了悬停效果的元素,例如no-js
,并在加载JavaScript时删除它,如果是的话。
Simple changes really. 简单的改变真的。
<div id="button_div" class="no-js">
$(document).ready(function () {
var $btnDiv = $("#button_div");
$btnDiv.removeClass('no-js');
$btnDiv.not('.no-js').hover(function () {
$("#checkbox_div").slideDown("fast");
});
});
#button_div.no-js:hover>#checkbox_div {
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.