jQuery 1.3.2의 아코디언은 작동하지 않습니다 (1.3에서 일하고 있었다!)

Question

좋아, 어딘가에 뭔가 잘못되었습니다. 내가 버전 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와는 그렇지 않다는 사실에서 벗어나지 않습니다.

Answer 1

나는 당신의 선택기를 믿습니다 $(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');

});

Answer 2

아코디언 도서관도 업그레이드해야 할 수도 있습니다. 어떤 스타일의 선택기와 같은 [@attr] 아코디언이 사용하는 스타일 선택기는 이미 더 이상 사용되지 않았을 수 있습니다.