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

Question

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

我已经尝试将模糊事件附加到手风琴容器，但这似乎从来没有触发一个意想不到的时间。

下面是一个关于JSFiddle的例子

正如你所看到的，blur事件在accordion部分关闭时触发，而不是在其他时间。我希望一个事件只在打开的accordion部分失去焦点时触发。

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

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:不幸的是，有点但bug，折叠的项目有时不会再次打开…您必须在容器外再次单击。不知道为什么

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