jQuery Accordion : 링크가 작동하지 않습니다
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
jQuery를 사용하여 페이지에서 작업하고 있습니다 아코디언 UI 요소. 나는 그 예제에서 내 HTML을 모델링했습니다. <li> 요소, 나는 몇 가지 정렬되지 않은 링크 목록이 있습니다. 이와 같이:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
문제 : 링크는 작동하지 않습니다
내가 테스트 한 모든 브라우저에서 해당 아코디언 메뉴의 링크는 원인입니다. 붕괴 할 아코디언 섹션 링크 된 페이지로 이동하는 대신. (여전히 마우스 오른쪽 버튼을 클릭하고 링크 된 사이트로 이동할 수 있습니다.)
이것이 일종의 클릭 바인딩 문제 일 수 있습니까?
해결책
기본적으로 Accordian 위젯은 모든 링크를 헤더로 설정합니다. 변경하려면 선택기를 지정해야합니다. headers 옵션. 따라서 코드는 다음과 같습니다.
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
다른 팁
이벤트 버블 링을 방지하는 인라인 onlick을 추가해보십시오.
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
또는 그러한 DOMREADY 이벤트 :
$(".toggle-title a").click(function(event){ event.stopPropagation()})
그러나 후자는 코드가 현명하게 말하지만 jQuery는 클릭을 실행합니다! 나에게 자유롭게 느껴지는 것을 설명 할 수있는 사람이라면 누구나 Mootools와 Google 폐쇄 배경에서 온 기능이 있습니다.
나는이 똑같은 문제가 있었고 어디서나 답을 찾을 수 없었습니다. 실제로, 몇 가지 소식통은 그냥 할 수 없다고 말했다.
더 연주하자마자 나는 작동하는 솔루션을 찾았다. 크지는 않지만 매력처럼 작동합니다.
먼저, 클릭 할 수 있고 아코디언 제어에 면역을 원하는 링크를 쉽게 식별 할 수 있는지 확인하십시오. 나는 내 수업이 있었다.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
기본적으로 이것은 아코디언 헤더 내부의 링크를 클릭 할 때를 리망합니다. 그렇다면 아코디언은 일시적으로 비활성화되어 정상적인 발사를 방지합니다. 그런 다음이 경우 새 창에서 링크가 열리지 만 Document.Location도 사용할 수 있습니다.
우리가 아코디언을 즉시 다시 활성화하면 여전히 해고하고 아코디언을 전환합니다. 슈퍼 쇼트 타임 아웃이 충분한 지연을 제공한다는 것을 알았습니다.
이것이 누군가를 돕기를 바랍니다!
항상 연습해야합니다.
내 제안은 아코디언 () 함수를 사용하지 않는 것일 수 있습니다.
HTML
<body id="body">
<h2>Accordian</h2>
<div id="accordion" class="">
<div class="toggle_all">
<ul class="links">
<li><a class="openall" href="#"><span>Open All</span></a></li>
<li>|</li>
<li><a class="closeall" href="#"><span>Close All</span></a></li>
</ul>
</div>
<!-- toggleAll ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
</div>
<!-- #accordion ends -->
</body>
CSS
<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>
jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".accordion_content").hide();
$("a.open").click(function() {
$(this).parents(".accordion").find(".accordion_content").toggle();
$(this).parents(".accordion").toggleClass('on');
return false;
});
$(".accordion_content").mouseover(function() {
$(this).addClass('accordion_content_hover');
return false;
});
$(".accordion_content").mouseout(function() {
$(this).removeClass('accordion_content_hover');
return false;
});
$("a.openall").click(function() {
$(".accordion_content").show();
$(this).parents("#accordion").find(".accordion").addClass('on');
return false;
});
$("a.closeall").click(function() {
$(".accordion_content").hide();
$(this).parents("#accordion").find(".accordion").removeClass('on');
return false;
});
});
</script>
도움이 되었기를 바랍니다.
다음은 여전히이 문제를 겪고있는 사람을위한 가능한 대체 스크립트입니다.http://twostepmedia.co.uk/notes/development/jquery-accordion/
다른 질문에 대한 나의 대답처럼 :
navigation: true
옵션 목록에 설정해야합니다.
