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

Question

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

我尝试将模糊事件附加到手风琴容器，但这似乎永远不会触发意外的时间。

这是 JSFiddle 上的示例

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

我还尝试将模糊事件附加到手风琴部分，但这似乎从未触发。 示例

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

它会破坏并重新激活手风琴，这是我目前找到的唯一解决方案。

它有效，但关闭动画无效。也许稍微尝试一下就可以让它正常工作（请参阅代码中的提示）。

编辑：

注意我删除了 -标签，因此标题如下所示：

    <h3>Example</h3>

Answer 2

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

---

编辑：现在也有了焦点。

请参阅 jsfiddle

编辑 2：不幸的是，有一点但有问题，折叠的项目有时不会再次打开......必须在容器外再次单击。不知道为什么。

Answer 3

我成功地使用事件外部插件成功地做到了这一点。我认为这是一个相当沉重的解决方案，所以如果有人有更好的解决方案，那就太好了。

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

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

如果用户在元素外部进行选项卡或在没有单击的情况下失去焦点，则这将不起作用，但这对于我的目的来说已经足够了。

Answer 4

您可以使用 JQuery 的 mouseleave 事件

从文档中：

mouseleave JavaScript 事件是 Internet Explorer 专有的。
由于该事件的通用性，jQuery 模拟了该事件，因此
无论浏览器如何，都可以使用它。该事件被发送到
当鼠标指针离开元素时。任何 HTML 元素
可以接收此事件。

这是一个 演示

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