내가 작업중인 프로젝트에서 Twitter의 부트 스트랩 '축소'플러그인 (documentation)을 사용하고 있습니다. 접을 수있는 항목을 전환하려면 각 부모 요소를 클릭해야하는 방식을 정말 좋아하지 않으므로 마우스를 대면 대신 접을 수있는 항목을 표시하거나 숨기려면 직접 스크립트를 작성했습니다. 여기 Bootstrap Collapse의 API 클릭 이벤트를 사용 중지하는 방법
는 스크립트 코드입니다 :$(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에 정의 된 클릭 이벤트 (아래쪽 here)가 여전히 사용되고 있다는 것입니다. 상위 요소를 클릭하면 접을 수있는 항목이 토글됩니다. API에서 클릭 토글을 사용 중지하는 방법이 있는지 궁금합니다. 나는 여전히 요소 내부를 클릭 할 수 있기를 원한다. (다른 페이지에 대한 링크를 포함하고 있기 때문이다.) 나는 접을 수있는 항목을 토글하지 않기를 바랍니다.
근무했습니다. 고맙습니다!! – YNotSayNay