我有以下Jquery显示和隐藏div与一个按钮单击。在前两次单击中,仅工作得很好。第二次点击后,URL中出现了一个标签,脚本不起作用。我尝试将e.preventDefault()
放在方法的顶部,但这会阻止单击事件甚至工作。这里有什么问题吗?
<script>
$(document).ready(function () {
$('.container').hide();
$('.status-icon').text("+");
$('#expandsections').click(function (e) {
var allContentToggleContainers = $('.content-toggle .container');
var allVisibleContentToggleContainers = allContentToggleContainers.filter(function () {
return $(this).css("display") == "block";
});
if (allContentToggleContainers.length && allContentToggleContainers.length === allVisibleContentToggleContainers.length) {
allContentToggleContainers.hide().next().slideUp();
$('.status-icon').text("+");
}
else {
allContentToggles.not('selector:visible').show().next().slideDown();
$('.status-icon').text("+");
}
return false;
});
});
</script>
这是一个jsfiddle: http://jsfiddle.net/Grimbode/VTh5C/
似乎"allContentToggles"应该是"allContentToggleContainers"代替。
在我切换它们的那一刻,代码开始按预期工作。如果这是你想要的,请告诉我。
$('.container').hide();
$('.status-icon').text("+");
$('#expandsections').click(function (e) {
var allContentToggleContainers = $('.content-toggle .container');
var allVisibleContentToggleContainers = allContentToggleContainers.filter(function () {
return $(this).css("display") == "block";
});
if (allContentToggleContainers.length && allContentToggleContainers.length === allVisibleContentToggleContainers.length) {
allContentToggleContainers.hide().next().slideUp();
$('.status-icon').text("+");
} else {
allContentToggleContainers.not('selector:visible').show().next().slideDown();
$('.status-icon').text("+");
}
return false;
});
下面的解释可能会对你有所帮助:
"href"我应该为JavaScript链接使用的值"#"或"javascript:无效(0)"?
在这个场景中你的html是什么?(主要是expandsections -它是一个div还是一个标签?)