我的网站上有一个标题,其中有一些标题,每个标题都包含与您相关的内容,当您单击标题时该标题会下降。我试图添加一些javascript,以便当您单击标题时显示内容,并且所有其他打开的内容都会消失。它适用于前几个开放式测试,但过了一段时间,它们保持开放状态。我想知道是否有办法让它只能打开其中一个部分。
提前致谢!
这是HTML:
<div class="heading">Header 1</div>
<div class="headingcontent">Content 1</div>
<div class="heading">Header 2</div>
<div class="headingcontent">Content 2</div>
<div class="heading">Header 3</div>
<div class="headingcontent">Content 3</div>
这是javascript:
jQuery(document).ready(function () {
jQuery(".headingcontent").hide();
var headingcontent_open = false;
jQuery(".heading").click(function () {
if (headingcontent_open === false) {
headingcontent_open = true;
jQuery(this).next(".headingcontent").slideToggle(500);
} else {
headingcontent_open = false;
$(".headingcontent").hide(500);
jQuery(this).next(".headingcontent").slideToggle(500);
}
});
答案 0 :(得分:0)
为每个内容div提供一个id并在header标签中设置data- *属性,并在使用“active”类时在jQuery代码中引用它。
<div class="heading" data-content="content1">Header 1</div>
<div class="headingcontent" id="content1">Content 1</div>
<div class="heading" data-content="content2">Header 2</div>
<div class="headingcontent" id="content2">Content 2</div>
<div class="heading" data-content="content3">Header 3</div>
<div class="headingcontent" id="content3">Content 3</div>
的javascript:
jQuery(".heading").click(function () {
var ContentDivID = $(this).data("content");
$(".headingcontent").removeClass("active");
$("#"+ContentDivID).addClass("active").slideDown(500); //Slides down the active div
$(".headingcontent").not(".active").slideUp(500); //Slides up all the content divs that dont have the "active" class
});
这假设您使用HTML5作为数据 - *是html5属性,如果您的目标浏览器没有那些可用的浏览器,则必须修改代码以适应这种情况。