jQuery 自定义手风琴 - 不适用于 IE/ Safari / Chrome
当单击相应的 时,我的脚本应该展开/折叠 UL 元素。它在 Firefox 中运行良好,可以在此处查看。
我首先加载 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>
click()
似乎不会在 IE/Safari/Chrome 中触发,但初始隐藏/显示会触发,它还会触发默认行为并链接到“mypage.html#”我尝试过 preventDefault();,但也许我做错了。
任何帮助都非常感谢!
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!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
非常感谢 Karasutengu 抽出时间为我进行测试,我真的很感激。我已经设法使用 jquery 的切换开关将 ':visible' 切换为替代方法。我想这可能就是问题的根源。
如果有人感兴趣,这里是最终的跨浏览器兼容代码:
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:
抱歉,我们需要更多信息。我刚刚尝试了这段代码(jQuery 版本 1.4.2):
它似乎在 Safari 下正常工作。也许这是你的布局中的其他内容?
I'm sorry, but we will need more information. I just tried this code (jQuery version 1.4.2):
and it seems to be working properly under Safari. Maybe it's something else from your layout?