HTML :jQuery를 선택 버그
<div id="accordion">
<div class="top">
<a href="" class="showAll">Show all</a> | <a href="" class="hideAll">Hide all</a>
</div>
<div class="body">
<div class="item">
<a href="" class="head" title="show">item1</a>
<div class="content">
<p>
Item1 content;
</p>
<a href="" class="backToTop">Back to top</a>
</div>
</div>
<div class="item">
<a href="" class="head" title="show">Item2</a>
<div class="content">
<ul>
<li>item2 content;</li>
<li style="list-style: none"><a href="" class="backToTop">Back to top</a></li>
</ul>
</div>
</div>
</div>
</div>
JS :
$("#accordion .content").slideUp();
$("#accordion .item a.head").click(function (e) {
//open tab when click on item
e.preventDefault();
$(this).toggleClass('active');
$(this).next().stop().slideToggle();
if ($(this).hasClass('active')) {
$(this).attr('title', 'hide');
} else {
$(this).attr('title', 'show');
}
});
$("#accordion .showAll").click(function (e) {
//open all tab
e.preventDefault();
$("#accordion .item a").each(function() {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
});
$("#accordion .hideAll").click(function (e) {
//hide all tab
e.preventDefault();
$("#accordion .item a").each(function() {
if ($(this).hasClass('active')) {
$(this).click();
}
});
});
$(".backToTop").click(function (e) {
//scroll to top
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 450);
});
기본적으로는 아코디언, 여기
JSfiddle JQuery와 이루어 매우 간단 하나 : http://jsfiddle.net/PqaXZ/6/ (주 * :이 예를 보려면 아래로 스크롤해야합니다.) "Show All"버튼을 클릭하는 이유는 누구나 설명 할 수 있습니다. "Ba ck to top "버튼을 클릭하십시오.
당신이 그것을에 클릭을 유발하고 있기 때문에 아무것도 가능성을 미리
벙어리 나! 매우 당황스러운!!! –