我有通过 asp.net 生成的动态数量的 div。我需要通过单击标题来显示每个 div 内容。我已经尝试过这个{
$(function () {
var myHead = $(".toggle-container").find(".toggle-header");
var myBody = $(myHead).parent().find(".toggle-content");
$(myHead).click(function () {
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
但它仅适用于第一个标题,其余标题不会折叠其子内容。这是JsFiddle链接我到目前为止所尝试过的。谁能修复一下吗?
最佳答案
问题在于您如何找到要显示/隐藏的内容。您需要找到与单击的标题相关的内容,代码 var myBody = $(myHead).parent().find(".toggle-content");
应该进入点击处理程序内部,如下所示var myBody = $(this).next()
$(function () {
var myHead = $(".toggle-container .toggle-header");
$(myHead).click(function () {
var myBody = $(this).next()
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
演示:Fiddle
注意:上下箭头仍然不起作用,因为您需要使用 find()
而不是 children()
但可以简化为
jQuery(function ($) {
var $heads = $(".toggle-container .toggle-header");
$heads.click(function () {
var $this = $(this);
$this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
$this.next().slideToggle("slow");
});
});
演示:Fiddle
关于javascript - jquery 显示隐藏每个 div onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18942835/