jQuery 1.3.2의 아코디언은 작동하지 않습니다 (1.3에서 일하고 있었다!)
-
19-09-2019 - |
문제
좋아, 어딘가에 뭔가 잘못되었습니다. 내가 버전 1.3을 사용할 때 아코디언은 잘 작동했습니다. jQuery를 버전 1.3.2로 업그레이드하면 이제 더 이상 예상대로 작동하지 않습니다. IE6이 던지는 오류를 해결하기 때문에 최신 버전이 필요합니다 ...
그렇다면 코드는 다음과 같습니다. jQuery의 최신 vesion과 함께 작동하기 위해 무엇을 변경해야합니까?
$(function() {
$(".accordion h4").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h4").click(function(){
$(this).next(".accordion div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger('click');
});
HTML은 다음과 같습니다.
<div class="accordion">
<h4 id="open">Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
<h4>Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
<h4>Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
작동하지 않는 경우 두 번째 패널을 확장 할 때 첫 번째 패널이 정상으로 무너져야하지만 1.3.2로는 그렇지 않습니다 ... 그렇지 않습니다.
*문제를 일으킨 HTML/CSS 인 것처럼 HTML을 실제로 진행 한 것으로 업데이트했습니다.
CSS를 설정했습니다.
li strong{display:block;float:left;width:250px;background:#ccc;}
li em{display:block;float:left;width:700px;background:#ddd;}
"2-columned 테이블 같은"효과를 제공하려면 (및 쉬운 클라이언트 CMS 편집을 위해-"Bold"버튼을 누르고 "I"버튼을 누르기 위해)-이것이 바로이 떠 다니는 것 같습니다. 아코디언을 만든 요소는 작동하지 않습니다. "float : left;"를 제거했을 때 - 다시 정상적으로 작동했습니다.
그리고 동일한 설정이 JQuery1.3.0과 함께 작동하지만 jQuery1.3.2와는 그렇지 않다는 사실에서 벗어나지 않습니다.
해결책
나는 당신의 선택기를 믿습니다 $(this).next(".accordion div")
작동 안 할 것이다. 다음 ()은 다음 형제 만 잡아서 어린이를 보는 필터를하는 것은 이상합니다.
또한 순수한 CSS 클래스 선택기 대신 Nodename이있는 선택기를 사용해보십시오. 사용 div.accordian
단지보다는 .accordian
당신의 js에서
노력하다
$(function() {
$("div.accordion h4").eq(2).addClass("active");
$("div.accordion div").eq(2).show();
$("div.accordion h4").live('click', function(){
var $el = $(this);
$el.next()
.slideToggle("slow")
.siblings("div:visible")
.slideUp("slow");
$el.toggleClass("active");
$el.siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger('click');
});
다른 팁
아코디언 도서관도 업그레이드해야 할 수도 있습니다. 어떤 스타일의 선택기와 같은 [@attr]
아코디언이 사용하는 스타일 선택기는 이미 더 이상 사용되지 않았을 수 있습니다.