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

很棒的小费。

我做了一些改变。

        //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');
                }

            });
        });

Answer 3

触发单击时，您可以检查鼠标位置是否在每个可协作部分内。

就像是：

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，但我相信你理解这个想法。