私の最終的な救世主ビートルート-ビートルートによる素晴らしい答えに賛成することを忘れないでください！
.toggle()クリック時にのみ表示され、非表示にならないというこの問題が発生しました。
TL; DR：通常は下のスクリーンショットのように見えますが、もう一度クリック.toggle();しても非表示になりません。
最初のdivは、実際の選択ボックスの上にマウスオーバーすると表示され、クリックするとそれ自体がクリックされます。
通常、1pxの黒い境界線を持つ小さなdivである最初のdivをクリックすると、2番目の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ページにコードをコピーすると、どういうわけかmisterproblem.phpが完全に機能しません。
このdivを何らかの方法で切り替えるのを手伝ってください。>。<