Question

我正在使用作为jquery-ui框架一部分的手风琴。当用户点击屏幕的另一部分时，我希望手风琴完全折叠。

我曾尝试将一个模糊事件附加到手风琴容器中，但这似乎从来没有发生意外时间。

的示例

如您所见，当手风琴部分关闭且没有其他时间时会触发模糊事件。我希望只有当一个开放的手风琴部分失去焦点时才会触发事件。

我还尝试将一个模糊事件附加到手风琴部分，但这似乎从未激发过。 Example

Answer 1

这看起来并不像你想象的那么容易。请参阅此部分解决方案：

function activate() {

    $('.container').accordion("destroy");

    $('.container').accordion({
        collapsible: true,
        active: false
    });

}

activate();

$('.container h3').live( 'blur', function() {
    $(".container").accordion('activate', false);
    activate(); // this should be delayed until the elements are closed
});

它摧毁并重新激活手风琴，这是我现在找到的唯一解决方案。

它有效，但结束动画却没有。也许稍微尝试一下，你可以让它正常工作（参见代码中的提示）。

编辑：

注意我删除了<a> - 标记，因此标题如下所示：

    <h3>Example</h3>

Answer 2

我的第二次尝试，没有插件（但仍然有点沉重）：只需将鼠标位置与容器尺寸进行比较即可。

编辑：现在也有焦点。

请参阅jsfiddle

编辑2：不幸的是，有些但是有问题，折叠的物品有时不会再打开......你必须在容器外第二次点击。不知道为什么。

Answer 3

我设法使用events outside plugin成功完成了此操作。我认为这是一个非常重要的解决方案，所以如果有人有更好的解决方案，那就太棒了。

不要使用模糊事件，只需使用绑定到容器元素的“clickoutside”事件：

$('.container').bind('clickoutside', function() {
  $(this).accordion("activate", false);
});

如果用户在元素外部标签或者在没有点击的情况下失去焦点，这将无法工作。

Answer 4

您可以使用JQuery's mouseleave event

来自文档：

mouseleave JavaScript事件是Internet Explorer专有的。由于事件的一般实用程序，jQuery模拟了这个事件无论浏览器如何都可以使用它。此事件发送给鼠标指针离开元素时的元素。任何HTML元素可以收到这个活动。

这里是demo

HTML

<div id="outside"></div>

<div id="accordion">
  <div>Panel 0</div>
  <div>Content 0</div>
  <div>Panel 1</div>
  <div>Content 1</div>
  <div>Panel2</div>
  <div>Content 2</div>

JS

  $('#accordion').accordion({
    heightStyle: "content",
    collapsible: true,
    active: false
  });

  $('#accordion').on('mouseleave', function() {
    $(this).accordion("activate", false);
  });

手风琴在失去焦点时如何折叠？

4 个答案: