jQuery 사용자 정의 아코디언 - IE/Safari/Chrome에서 작동하지 않습니다.

내 스크립트 해당 요소를 클릭하면 확장/축소됩니다. FF로 잘 작동하며 over here으로 볼 수 있습니다.jQuery 사용자 정의 아코디언 - IE/Safari/Chrome에서 작동하지 않습니다.

내가 먼저 내 자신의 examples.js을 jQuery를 lib 디렉토리를로드하고 포함하는 :이

function initExamples() { 
    $('#examples ul').hide(); 
    $('#examples ul:first').show(); 
    $('#examples li a:first').addClass('exampleon'); 
    $('#examples li a').click(function(event) { 
     event.preventDefault(); 
     var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
     return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#examples a.exampleon').removeClass('exampleon'); 
     $('#examples ul:visible').slideUp('normal'); 
     $(this).addClass('exampleon'); 
     checkElement.slideDown('normal'); 
     return false; 
     } 
     } 
    ); 
    } 
$(document).ready(function() {initExamples();});

반면에 내 HTML은과 같이 나타납니다

<ul id="examples"> 
     <li> 
      <a href="#">TITLE TEXT 1</a> 
      <ul> 
       <li><a href="#">MY CONTENT 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">TITLE TEXT 2</a> 
      <ul> 
       <li><a href="#">MY CONTENT 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">TITLE TEXT 3</a> 
      <ul> 
       <li><a href="#">MY CONTENT 3</a></li> 
      </ul> 
     </li> 
</ul>

크리크 ()는 IE/Safari/Chrome에서 트리거하지 않는 것처럼 보이지만 초기 숨기기/표시는 기본 동작을 트리거하고 'mypage.html #'에 연결됩니다. preventDefault()를 시도했지만 아마도 잘못 했어.

도움이 필요하십니까?

출처

2010-08-04 AndyCole

죄송합니다. 더 자세한 정보가 필요합니다. 방금이 코드 (jQuery 버전 1.4.2)를 사용해 보았습니다.

<html> 
<head> 
<title>test</title> 

<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script type="text/javascript" language="javascript"> 

function initExamples() { 
    $('#examples ul').hide(); 
    $('#examples ul:first').show(); 
    $('#examples li a:first').addClass('exampleon'); 
    $('#examples li a').click(function(event) { 
     event.preventDefault(); 
     var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
     return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#examples a.exampleon').removeClass('exampleon'); 
     $('#examples ul:visible').slideUp('normal'); 
     $(this).addClass('exampleon'); 
     checkElement.slideDown('normal'); 
     return false; 
     } 
     } 
    ); 
    } 

$(document).ready(function() {initExamples();}); 
</script> 

</head> 
<body> 

<ul id="examples"> 
     <li> 
      <a href="#">TITLE TEXT 1</a> 
      <ul> 
       <li><a href="#">MY CONTENT 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">TITLE TEXT 2</a> 
      <ul> 
       <li><a href="#">MY CONTENT 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">TITLE TEXT 3</a> 
      <ul> 
       <li><a href="#">MY CONTENT 3</a></li> 
      </ul> 
     </li> 
</ul> 
</body> 
</html>

Safari에서는 제대로 작동하는 것 같습니다. 레이아웃에 뭔가 다른게 있을까요?

출처

2010-08-04 04:26:55 Karasutengu

많은 분들에게 감사의 말씀을 전합니다. 정말 고맙습니다. 나는 ': visible'을 jquery의 토글을 사용하는 대체 메서드로 전환 할 수있었습니다. 나는 이것이 이것이 문제의 줄기라고 생각한다.

사람이 여기에 관심있는 최종 크로스 브라우저 호환 코드의 경우

$(document).ready(function() { 
    $('#examples ul').hide(); 
    $('#examples ul:first').show(); 
    $('#examples li:first').addClass('exampleon'); 
    $('#examples li a').click(function() { 
     $(this).css('outline','none'); 
     if($(this).parent().hasClass('exampleon')) { 
      $(this).siblings('ul').slideUp('slow',function() { 
       $(this).parent().removeClass('exampleon'); 
      }); 
     } else { 
      $('#examples li.exampleon ul').slideUp('slow',function() { 
       $(this).parent().removeClass('exampleon'); 
      }); 
      $(this).siblings('ul').slideToggle('slow',function() { 
       $(this).parent().toggleClass('exampleon'); 
      }); 
     } 
     return false; 
    }); 
});

출처

2010-08-05 21:37:07 AndyCole

jQuery 사용자 정의 아코디언 - IE/Safari/Chrome에서 작동하지 않습니다.

답변

관련 문제