Question

我有一个包含多个可折叠部分的页面，如下所示：

假面

IMPRESA

新闻

当我点击它外面时，我希望我页面上的所有可折叠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');
                }

            });
        });

JQuery mobile：在外部单击时关闭可折叠div（或任何div）

3 个答案: