Я использую плагин Twitter Bootstrap 'Collapse' (документация) в проекте, который я работаю над. Мне не очень понравилось, как нужно щелкнуть каждый родительский элемент, чтобы сворачиваемые элементы переключались, поэтому я написал свой собственный скрипт, чтобы показывать и скрывать сворачиваемые элементы при наведении, а не при щелчке.
Вот код скрипта:
$(function spark_item_hover() {
$(this).on('mouseenter.collapse.data-api', '[data-toggle=collapse]', function() {
var $this = $(this), target = $this.attr('data-target')
, option = $(target).data('collapse') ? 'show' : $this.data()
$(target).collapse();
$(target).show('true');
})
$(this).on('mouseleave.collapse.data-api', '[data-toggle=collapse]', function() {
var $this = $(this), target = $this.attr('data-target')
, option = $(target).data('collapse') ? 'hide' : $this.data()
$(target).hide('true');
})
})
А вот как я вызываю скрипт в HTML (удалив все ненужное):
<li class="spark-item" onhover="spark_item_hover()" data-target="#context155" data-toggle="collapse">
<div class="span11">
<div class="row-fluid">
<div id="context155" class="collapse" style="height: auto; display: none;"></div>
</div>
</div>
</li>
Это в основном делает то, что я хочу: он будет показывать свернутый элемент, когда я наведу на него курсор, и скрою его, когда я отойду. Единственная проблема заключается в том, что событие клика определено в API (нижняя часть здесь) все еще используется; когда я нажимаю на родительский элемент, он по-прежнему переключает складной элемент. Мне было интересно, есть ли способ отключить переключение кликов из API? Я все еще хочу иметь возможность щелкнуть внутри элемента (потому что он содержит ссылки на другие страницы); Я просто не хочу, чтобы он переключал складной элемент.
