请不要忘记为我最终的救星甜菜根-甜菜根的好答案投票!
我有这个问题,.toggle()
只在点击时显示,它从不隐藏。
TL;DR:它通常看起来像下面的屏幕截图,但当我第二.toggle();
次单击时它不会隐藏。
第一个 div 出现在实际选择框的鼠标悬停上,它会在其自身上收到任何点击。
通常单击第一个 div 是带有 1px 黑色边框的小 div 将显示第二个 div,它可以工作,再次单击将隐藏它,这不起作用。(点击事件有效,切换失败)
这是元素的 html,是的,它通常在表格单元格中:
<td style="vertical-align: top; text-align: left;">
<select class="placeholder0" id="sortedselect0">
<option selected="selected">- for - </option>
<option>adj. foraminated</option>
<option>adj. foraminiferous</option>
<option>adj. foraminous</option>
<option>adj. forbearant</option>
<option>adj. forbearing</option>
<option>adj. forbidden</option>
<option>adj. forbiddenly</option>
<option>adj. forbidding</option>
<option>adj. forblack</option>
<option>adj. forby</option>
<option>AND MANY MORE OPTIONS</option>
</select>
<div class="anti" id="anti0" style="height: 18px; width: 179px; position: absolute; top: 209px; left: 494px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-image: initial; background-color: transparent; display: block; "></div>
<div class="floats" style="display: none; position: absolute; top: 227px; left: 494px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-image: initial; " id="floatdiv0"><img style="width: 222px; height: 342px;" alt="" src="fake_iframe.png"></div>
然后是直接跟随它的javascript
<script type="text/javascript">
//make original select box unselectable
jQuery(".placeholder0").mouseover(function() {
var pos = jQuery(this).position();
var width = jQuery(this).outerWidth();
var height = jQuery(this).outerHeight();
jQuery("#anti0").css({
height: (height - 2) + "px",
width: (width - 2) + "px",
position: "absolute",
top: pos.top + "px",
left: pos.left + "px",
border: 1 + "px solid black",
z: 2,
"background-color":"transparent"
});
});
jQuery("#floatdiv0").unbind('click');
jQuery("#anti0").live('click', function(){
// .position() uses position relative to the offset parent,
// so it supports position: relative parent elements
var pos = jQuery(this).position();
// .outerWidth() takes into account border and padding.
var width = jQuery(this).width();
var height = jQuery(this).height();
//first hide any other fake selects
jQuery("div.floats").hide();
//and antiselect overlays
jQuery("div.anti").hide();
//unhide current antiselect overlay
jQuery("#anti0").show();
//show the menu directly over the placeholder
jQuery("#floatdiv1").css({
position: "absolute",
top: (pos.top + height) + "px",
left: pos.left + "px",
border: 1 + "px solid black",
//padding: height + "px",
z: 1
});
jQuery("#floatdiv1").toggle();
});
//hides the menu
jQuery("#floatdiv1").mouseleave(function() {
jQuery("#floatdiv1").hide();
//and unhide overlays
jQuery("div.anti").show();
});
</script><br>
</td>
我把 .unbind 扔在那里只是为了尝试,我什至不确定它是为了什么,我害怕。
现场也发生了同样的情况,只是 .click 很好。
//隐藏菜单是我隐藏 div 窗口的旧方法,只是离开它,它完美无缺。
我正在考虑诉诸
{
if ( showOrHide == true ) {
jQuery('#floatdiv1').show();
} else if ( showOrHide == false ) {
jQuery('#floatdiv1').hide();
}
}
但我测试了它并没有用,所以也许我做错了?
我想在工作中添加一个有问题的代码示例,但不知何故,当我将代码从常用页面复制到这个新的 php 页面时,问题.php先生完全不起作用。
请帮助我以一种或另一种方式切换此 div。>.<