Question

请不要忘记通过我最终的救星Beetroot-Beetroot来回答这个伟大的答案！

我遇到了这个问题，.toggle()只在点击时显示，它永远不会隐藏。

TL; DR：它通常看起来像下面的截图，但是当我点击第二时间时，.toggle();不会隐藏。

第一个div显示在实际选择框的鼠标悬停上，并自动接收任何点击。

通常单击第一个div，它是带有1px黑色边框的小div，将显示第二个div，它有效，再次单击将隐藏它，这不起作用。（点击事件有效，切换失败）< / p>

screenshot

这是元素的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页面时，mister problem.php完全无效。

请帮助我以这种或那种方式切换这个div。＆GT;。＆LT;

Answer 1

有一些假设......

点击处理程序内部：

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

由于#floatdiv1也有class="floats"，上面命令序列的净效果始终是显示它。

尝试：

jQuery("div.floats").not("#floatdiv1").hide();//hide all other floats
...
jQuery("#floatdiv1").toggle();//toggle this float

jQuery .toggle（）只显示，永远不会隐藏绝对定位的div

1 个答案: