jQuery自定义手风琴 - 无法在IE/Safari/Chrome中工作

我的脚本应该展开/折叠当点击相应的UL元素时。它工作在FF罚款，可以查看over here。jQuery自定义手风琴 - 无法在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（），但也许我做错了。

任何帮助超级赞赏！

来源

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非常感谢您花时间为我测试，我真的很感激。我已经设法切换'：可见'的替代方法使用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中工作

回答

相关问题