jquery - JQuery mobile：外側をクリックすると折りたたみ可能なdiv（または任意のdiv）を閉じます

Question

次のように、複数の折りたたみ可能なセクションがあるページがあります。

ペルソナ

インプレサ

ニュース

ページの外側をクリックすると、ページ上のすべての折りたたみ可能なdiv（これを含む）を折りたたみます。ここでstackoverflowで一般的なソリューションの多くを試しましたが、それぞれにいくつかの悪い副作用があります...何か考えはありますか？

Answer 1

//when a user clicks anywhere (unless the event is stopped from propagating) this will fire
$(document).delegate('.ui-page', 'click', function () {

    //if we trigger `collapse` on the collapsible widget, it will close
    $(this).find('.ui-collapsible').trigger('collapse');
});

これは、ページがクリックされたときにページ上のすべての折りたたみ可能なウィジェットを閉じることを処理します。次に、折りたたみ可能なウィジェットからのイベントのバブリングを停止して、ウィジェットを開いたときにウィジェットも閉じられないようにする必要があります。

//anytime a user clicks on a collapsible widget
$(document).delegate('.ui-collapsible', 'click', function (event) {

    //we stop the event from bubbling so it doesn't reach the `.ui-page` element and close the collapsible again
    event.stopPropagation();
});

これがデモです：http：//jsfiddle.net/Hgzpn/

Answer 2

クリックがトリガーされると、マウスの位置が各折りたたみ可能なセクション内にあるかどうかを確認できます。

何かのようなもの：

if (section.X <= mouseX && mouseX <= section.x + section.width && section.y <= mouseY && mouseY <= section.y + section.height) //mouse is inside => don't collapse
else // mouse is outside => collapse

上記のコードはjavascriptではありませんが、あなたはアイデアを理解していると確信しています。

Answer 3

素晴らしいヒント。

いくつか変更を加えました。

        //when a user clicks anywhere (unless the event is stopped from propagating) this will fire
        $(document).delegate('.ui-page', 'click', function () {

            //if we trigger `collapse` on the collapsible widget, it will close
            $(this).find('.ui-collapsible').trigger('collapse');
        });


        //When clicking on a collapsible, close the remainig collapsibles
        $('.ui-collapsible').bind('expand', function (dropdown) {

            $(document).find('.ui-collapsible').each( function (number, element) {

                if (dropdown.currentTarget != element)
                {
                    $(this).trigger('collapse');
                }

            });
        });