0

jQuery v1.8.3 と jQuery UI v1.9.2 を使用しています。

a clickof abuttonメニューulが開いている場合は ( a を介して) 非表示になり、閉じている場合は表示するようにしたいので、最も基本的な形式である on ,でトグル機能を使用することにしました。そのように単純です、例えばclicktoggle()

button.click =>
  autocomplete = input_field.data("ui-autocomplete")
  menu = autocomplete.menu
  ul = menu.element
  ul.toggle()

（それはcoffeescriptですが、要点はわかります）

実際に起こることは、ulが最初に (ボタン経由ではなく) 表示されたときに、表示プロパティが に設定されているdisplay: blockということです。

次に、ボタンの最初のクリックで、クリック関数内で表示プロパティの現在のステータスを確認すると、次のようになります。

console.log "display = #{ul.css('display')}"
ul.toggle()
console.log "display = #{ul.css('display')}"

出力は次のとおりです。

表示 = なし
表示 = ブロック

そのため、何らかの理由でプロパティが最初に誤って取得されています。

表示プロパティを追加display: blockし、次のクリックで設定しますdisplay: none。

オートコンプリート ウィジェットulによってレンダリングされるため、直接制御することはできず、それをいじる必要はありません。

これは予想される動作ですか?これを回避する最善の方法は何ですか? 表示属性が設定されているかどうかをチェックし、それに応じて表示または非表示にする関数を渡すことを考えてclickいますが、より簡単な方法またはより良い機能、おそらく新しいバージョンのトグルがある場合は、お知らせください。jQuery のドキュメントは、私の見解では、あらゆる技術プロジェクトの中で最悪のものの 1 つであるため、完全に間違った関数を使用している可能性が高いと考えています。

どんな助けでも大歓迎です。

4

4 に答える 4

0

ページ読み込み時に表示属性を設定します。何かのようなもの

$(function(){
  $("ul").hide();
});

オートコンプリートがレンダリングされたら。

これにより、display：noneが設定されます.show()。display:block

于 2012-12-24T13:18:06.440 に答える
0

toggle要素にdisplayプロパティが明示的に設定されていない場合でも機能するはずです。例については、このjsfiddleを参照してください。チェックすることの1つは、クリックハンドラーを実行していることです。$(function() { ... });

于 2012-12-24T13:18:43.697 に答える
0

このコードを確認してください

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#show").click(function(){
    $("ul").toggle();
  });

});
</script>
<style>
ul {display:none;}

</style>
</head>
<body>
<button id="show">Show</button>
<ul>
<li>aaaa </li>
<li>bbbb </li>
<li>ccccccc </li>
</ul>



</body>
</html>
于 2012-12-24T14:00:19.890 に答える
0

ページが最初にロードされたときに li が表示されると言っていますが、それが期待される動作であれば、どちらの方法でも問題ありません。私はこの JS フィドルを作成しましたhttp://jsfiddle.net/r0k3t/Rcpet/ページを最初にロードしたときに CSS が表示プロパティをブロックまたはなしに設定するかどうかにかかわらず、トグルは正常に機能します。より多くのコードを投稿した場合、何を達成したいのかを簡単に確認できますが、説明だけでは問題がどこにあるのかを知るのは困難です。単純な構文エラーが発生する可能性がありますが、私たちはそれを確認できません. とにかく-これはJSフィドルにあるのと同じコードです。

<a href="#" id="toggleButton">Toggle li element</a>
    <ul>
        <li>You can see me now</li>
    </ul>

//Here is the JS wired up in document load
function toggleLi() {
    $("ul li").toggle();
}

$("#toggleButton").click(toggleLi);

/* Here is the CSS */
ul li {
 display: block;  /*change to none and test - works as well */  
}
于 2012-12-24T13:40:28.357 に答える