原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

当需要在网站开发中实现多组区块的展开与折叠效果时，可以使用原生Js或者jQuery来实现。下面分别介绍这两种方法的具体实现步骤。

原生Js的实现方法

HTML结构示例

<div class="accordion">
  <div class="accordion-panel">
    <div class="accordion-heading">区块1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-heading">区块2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-heading">区块3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

CSS样式示例

.accordion-panel {
  margin-bottom: 10px;
}
.accordion-heading {
  background-color: #ccc;
  cursor: pointer;
  padding: 10px;
}
.accordion-content {
  display: none;
  padding: 10px;
}

javascript实现步骤

1. 获取所有的区块元素（class为.accordion-panel）
2. 给每个区块元素的标题元素（class为.accordion-heading）绑定点击事件。
3. 点击标题时，获取当前区块的内容元素（class为.accordion-content）。
4. 判断该内容元素的display属性是否为none，如果是则将其改为block，否则改为none。

下面是具体实现的代码：

var accordionPanels = document.querySelectorAll('.accordion-panel');
for (var i = 0; i < accordionPanels.length; i++) {
  var accordionHeading = accordionPanels[i].querySelector('.accordion-heading');
  accordionHeading.onclick = function() {
    var accordionContent = this.nextElementSibling;
    if (accordionContent.style.display === 'none') {
      accordionContent.style.display = 'block';
    } else {
      accordionContent.style.display = 'none';
    }
  };
}

jQuery的实现方法

HTML结构示例

<div class="accordion">
  <div class="accordion-panel">
    <div class="accordion-heading">区块1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-heading">区块2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-heading">区块3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

CSS样式示例

.accordion-panel {
  margin-bottom: 10px;
}
.accordion-heading {
  background-color: #ccc;
  cursor: pointer;
  padding: 10px;
}
.accordion-content {
  display: none;
  padding: 10px;
}

jQuery实现步骤

1. 获取所有的区块元素（class为.accordion-panel）
2. 给每个区块元素的标题元素（class为.accordion-heading）绑定点击事件。
3. 点击标题时，获取当前区块的内容元素（class为.accordion-content）。
4. 判断该内容元素的display属性是否为none，如果是则将其改为block，否则改为none。

下面是具体实现的代码：

$('.accordion-heading').on('click', function() {
  var $accordionContent = $(this).next('.accordion-content');
  if ($accordionContent.is(':hidden')) {
    $accordionContent.slideDown();
  } else {
    $accordionContent.slideUp();
  }
});

以上就是原生JS与jQuery多组处理仅展开一个区块的折叠效果的实现方法及示例。