jQuery custom Accordion - not working in IE/ Safari / Chrome
Question
My script should expand/collapse UL elements when a corresponding <a> is clicked. It works in Firefox fine and can be viewed over here .
I am loading jQuery lib first then my own examples.js which contains:
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();});
My HTML on the other hand appears like so:
<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>
The click() doesn't seem to trigger in IE/Safari/Chrome, but the initial hide/show does, it also triggers the default behaviour and links to 'mypage.html#' I've tried a preventDefault(); , but perhaps I did it wrong.
Any help is uber appreciated!
2 answers
solution1
0 2010-08-04 04:26:55
I'm sorry, but we will need more information. I just tried this code (jQuery version 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>
and it seems to be working properly under Safari. Maybe it's something else from your layout?
solution2
0 2010-08-05 21:37:07
Karasutengu many thanks indeed for taking the time to test for me, I really appreciate that. I've managed to switch the ':visible' for an alternative method using jquery's toggle. I think this may have been the stem of the problem.
If anyone's interested here's the final cross-browser compatible code:
$(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;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.