0

我的网站上有一个部分，其中有几个标题，每个部分都有与其相关的内容，当您单击标题时，该部分会下拉。我尝试向其中添加一些 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);

    }

});
4

1 回答 1

0

给每个内容 div 一个 id 并在 header 标记中设置一个 data-* 属性，并在使用“活动”类时在 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 作为 data-* 是 html5 属性，如果您的目标浏览器没有可用的浏览器，则必须修改代码以适应这种情况。

于 2013-06-02T15:10:57.887 回答