Как свернуть гармошку, когда она теряет фокус? - PullRequest
Новая
       10

Как свернуть гармошку, когда она теряет фокус?

1 голос
/ 05 мая 2011

Я использую аккордеон, который является частью фреймворка jquery-ui. Я хочу, чтобы аккордеон полностью разрушался, когда пользователь нажимал на другую часть экрана.

Я пытался прикрепить событие размытия к контейнеру гармошки, но это, кажется, никогда не вызывает неожиданные времена.

Вот пример JSFiddle

Как вы можете видеть, событие размытия запускается, когда аккордеонная секция закрыта и в другое время. Я хочу, чтобы событие происходило только тогда, когда открытый аккордеонный участок теряет фокус.

Я также пытался прикрепить событие размытия к участкам аккордеона, но это никогда не срабатывает. Пример

Ответы [ 4 ]

1 голос
/ 05 мая 2011

моя вторая попытка, без плагина (но все же несколько тяжелая): Просто сравнивает положение мыши с размерами контейнера.

РЕДАКТИРОВАТЬ: Теперь с фокусом тоже.

См. jsfiddle

РЕДАКТИРОВАТЬ 2: К сожалению, небольшие, но глючные, свернутые элементы иногда не открываются снова ... Вы должны нажать второй раз за пределами контейнера. Не знаю почему.

1 голос
/ 05 мая 2011

Похоже, это не так просто, как вы думаете. Смотрите это для частичного решения: 

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

Он разрушает и снова активирует аккордеон, единственное решение, которое я нашел прямо сейчас.

Работает, а анимация закрытия - нет. Возможно, с небольшой попыткой вы сможете заставить его работать должным образом (см. Подсказку в коде).

EDIT:

примечание: я удалил теги <a>, поэтому заголовки выглядят так: 

    <h3>Example</h3>
0 голосов
/ 05 августа 2015

Вы можете использовать событие JQuery mouseleave

Из документации:

Событие JavaScript "mouseleave" является собственностью 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);
  });
0 голосов
/ 05 мая 2011

Мне удалось сделать это успешно, используя события вне плагина . Я думаю, что это довольно тяжелое решение, так что если у кого-то есть лучшее, это было бы здорово.

Вместо использования события размытия, просто используйте событие «clickoutside», связанное с элементом контейнера: 

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

Это не будет работать, если пользователь вкладывает вкладку за пределы элемента или иным образом теряет фокус без щелчка, но этого было достаточно для моих целей.

...