0

トグルボタンで開閉できるドロップダウンメニューを作成しようとしています。ドキュメント自体の任意の場所をクリックして閉じることもできます。

人がトグルボタンをクリックすると、メニューが正しく開きます。次に訪問者がドキュメントの他の場所をクリックすると、メニューは閉じますが、そのボタンのトグル機能を再度アクティブにするには2回クリックする必要があります。もちろん、もう一度1クリックに減らしたいと思います。

この問題については、http：//jsfiddle.net/MEweN/3/を確認してください。誰か助けてくれませんか？

4

3 に答える 3

3

Toggleは、呼び出したオブジェクトの状態を保存します。Toggleを呼び出すたびに、関数1と関数2が交互に切り替わります。アプリについては他に何も知りません。呼び出すたびに、渡す2つの関数を交互に切り替えます。

Toggleを使用せずにポップアップの状態をリセットすると、最初の状態に戻りたいことがわからなくなるため、ポップアップの同期がとれなくなります。したがって、もう一度クリックすると、最初の関数を実行するときに2番目の関数が実行されます。

この問題を解決する最善の方法は、Toggleよりも賢いものを使用することです。ポップアップが開いているかどうかを検出してそれに応じて動作するか、ポップアップが開いているかどうかに関する状態を保存する必要があります。Toggleはアプリケーションにとって十分に賢くないため、使用できません。

実際のコードを操作しているときに、ドキュメントでのmouseupイベントの処理は、オブジェクトでのclickイベントの処理とあまり互換性がないこともわかりました。問題は、マウスアップがクリックの前に行われるため、両方のイベントが順番に取得され、希望する効果が得られないことです。ドキュメントのクリックに変更すると、次のように非常に簡単に機能しました。

$("#general_show").click(function () {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        $this.removeClass('selected').parent().next().hide();
    } else {
        $this.addClass('selected').parent().next().show();
    }
    return(false);
});

$(document).click(function (e) {
    if ($('#general_info').is(':visible') &&
          $(e.target).parents('#general_info').length === 0) {
      $('#general_show').removeClass('selected').parent().next().hide();
      return(false);
    }
});

実例： http： //jsfiddle.net/jfriend00/KTNAq/

于 2012-01-02T14:54:34.703 に答える
0 
  $("#general_show").click(function () {
      if( $(this).is('.selected') ){
          $(this).removeClass().parent().next().hide()
      }else{
          $(this).addClass('selected').parent().next().show()
      }
  });

  $(document).mouseup(function (e) {
    if (
        $('#general_show').is('.selected')
        && $(e.target).parents('#general_info').length === 0 
        && $(e.target).attr('id')!== "general_show"
    ) {
      $('#general_show').click()
    }
  });
于 2012-01-02T15:04:07.650 に答える
0 
$("#general_show").click(function () {
    if ( $('#general_info').is(':visible') ){
        // Hiding informations 

        $(this).removeClass('selected').parent().next().hide(); // try to always pass argument to removeClass, which class you want to remove
     } else {
        // Showin informations     
        $(this).addClass('selected').parent().next().show();

  }});

$(document).mouseup(function (e) {
    // We don't want to use this function when clicked on button
    if (e.target.id == 'general_show') return;

    if ( $('#general_info').is(':visible') ){

          $('#general_show').removeClass().parent().next().hide();
       }
});

JSFiddleリンク：http ：//jsfiddle.net/MEweN/5/

于 2012-01-02T15:06:17.210 に答える