0

请不要忘记为我最终的救星甜菜根-甜菜根的好答案投票!

我有这个问题,.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. &nbsp; foraminated</option>
<option>adj. &nbsp; foraminiferous</option>
<option>adj. &nbsp; foraminous</option>
<option>adj. &nbsp; forbearant</option>
<option>adj. &nbsp; forbearing</option>
<option>adj. &nbsp; forbidden</option>
<option>adj. &nbsp; forbiddenly</option>
<option>adj. &nbsp; forbidding</option>
<option>adj. &nbsp; forblack</option>
<option>adj. &nbsp; 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。>.<

4

1 回答 1

1

有一些假设...

在点击处理程序内部:

jQuery("div.floats").hide();
...
jQuery("#floatdiv1").toggle();

同样#floatdiv1class="floats"上面命令序列的实际效果将始终显示它。

尝试 :

jQuery("div.floats").not("#floatdiv1").hide();//hide all other floats
...
jQuery("#floatdiv1").toggle();//toggle this float
于 2012-05-12T22:10:44.993 回答