jQuery custom Accordion - не работает в IE/Safari/Chrome

Мой скрипт должен развернуть/свернуть элементы UL при щелчке соответствующего элемента. Он отлично работает в FF и может быть просмотрен over here.jQuery custom Accordion - не работает в IE/Safari/Chrome

Я загрузка JQuery LIB первым тогда мой собственный examples.js, который содержит:

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, но исходное hide/show делает, оно также вызывает поведение по умолчанию и ссылки на «mypage.html #». Я пробовал функцию preventDefault() ;, но, возможно, я сделал это неправильно.

Любая помощь uber оценена!

источник

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

Karasutengu Большое спасибо за то, что нашли время, чтобы проверить меня, я действительно ценю это. Мне удалось переключить ': visible' для альтернативного метода, используя jquery's toggle. Я думаю, что это может быть причиной проблемы.

Если кто-то заинтересован, вот окончательный кросс-браузерный код:

$(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 custom Accordion - не работает в IE/Safari/Chrome

ответ

Смежные вопросы