登录
当前位置： 首页 > 知识库问答 >
问题：

如何编辑手风琴可扩展的JavaScript

戚俊人
2023-03-14

我只是JavaScript领域的初学者，所以我需要一些专家来指导我如何编辑JavaScript代码，使其一次只扩展一行。

（希望在单击另一行时自动关闭上一行，现在可以一次展开所有行）

这是代码https://jsfiddle.net/4L4e88w6/11/

//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
  var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
    setAria,
    setAccordionAria,
    switchAccordion,
    touchSupported = ('ontouchstart' in window),
    pointerSupported = ('pointerdown' in window);

  skipClickDelay = function(e) {
    e.preventDefault();
    e.target.click();
  }

  setAriaAttr = function(el, ariaType, newProperty) {
    el.setAttribute(ariaType, newProperty);
  };
  setAccordionAria = function(el1, el2, expanded) {
    switch (expanded) {
      case "true":
        setAriaAttr(el1, 'aria-expanded', 'true');
        setAriaAttr(el2, 'aria-hidden', 'false');
        break;
      case "false":
        setAriaAttr(el1, 'aria-expanded', 'false');
        setAriaAttr(el2, 'aria-hidden', 'true');
        break;
      default:
        break;
    }
  };
  //function
  switchAccordion = function(e) {
    console.log("triggered");
    e.preventDefault();
    var thisAnswer = e.target.parentNode.nextElementSibling;
    var thisQuestion = e.target;
    if (thisAnswer.classList.contains('is-collapsed')) {
      setAccordionAria(thisQuestion, thisAnswer, 'true');
    } else {
      setAccordionAria(thisQuestion, thisAnswer, 'false');
    }
    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('is-collapsed');
    thisAnswer.classList.toggle('is-expanded');

    thisAnswer.classList.toggle('animateIn');
  };
  for (var i = 0, len = accordionToggles.length; i < len; i++) {
    if (touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if (pointerSupported) {
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();
* {
  box-sizing: border-box;
}

.heading-primary {
  padding: 3em 0em 0.5em 0em;
  text-align: left;
}

.accordion dl,
.accordion-list {
  border: 1px solid #ddd;
}

.accordion dl:after,
.accordion-list:after {
  content: "";
  display: block;
  height: 0.5em;
  width: 100%;
  background-color: #5c5c5c;
}

.accordion dd,
.accordion__panel {
  background-color: #E3F2FD;
  font-size: 1em;
  line-height: 1.5em;
}

.accordion p {
  padding: 1em 2em 1em 2em;
}

.accordion {
  position: relative;
  background-color: #eee;
}

.accordionTitle,
.accordion__Heading {
  text-align: left;
  font-weight: 500;
  padding: 1em;
  display: block;
  text-decoration: none;
  color: #424242;
  /*  -webkit-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out; */
  border-bottom: 1px solid #2a54a2;
}

.accordionTitle:before,
.accordion__Heading:before {
  content: "?";
  font-size: 1.5em;
  font-weight: bold;
  line-height: 0.5em;
  float: right;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.accordionTitle:hover,
.accordion__Heading:hover {
  background-color: #01579B;
  color: white;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
  background-color: #01579B;
  color: white;
}

.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
  content: "+";
  -webkit-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  transform: rotate(-225deg);
  font-size: 2.5em;
  font-weight: 100;
}

.accordionItem {
  height: auto;
  overflow: hidden;
  max-height: 50em;
  -webkit-transition: max-height 1s;
  transition: max-height 1s;
}

@media screen and (min-width: 48em) {
  .accordionItem {
    /*max-height: 15em;*/
    -webkit-transition: max-height 0.25s;
    transition: max-height 0.25s;
  }
}

.accordionItem.is-collapsed {
  max-height: 0;
}

.no-js .accordionItem.is-collapsed {
  max-height: auto;
}

.animateIn {
  -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
  animation: accordionIn 0.45s normal ease-in-out both 1;
}

.animateOut {
  -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
  animation: accordionOut 0.45s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(38px);
    transform: translateY(38px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(38px);
    transform: translateY(38px);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    /*
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0; */
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
    transform: scale(0.9) rotateX(-60deg);
  }
}

@keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
    transform: scale(0.9) rotateX(-60deg);
  }
}
<div class="container">
  <h3 class="heading-primary">Q&A</h3>
  <div class="accordion">
    <dl>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">First Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecejusto dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum r. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
        <p>Aliquam dapibus, ante quis fringilla </p>
      </dd>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Second Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus
          nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Third Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus
          nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>


    </dl>
  </div>
</div>

共有1个答案

穆招
2023-03-14

我同意@DanielBeck的观点，您的代码可以进一步简化，典型的方法是折叠所有项目，然后展开当前点击的项目。

但是这里有另一种方法：您可以保留对扩展元素的引用并在扩展新元素之前将其折叠。像这样：

//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
  var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
    setAria,
    setAccordionAria,
    switchAccordion,
    touchSupported = ('ontouchstart' in window),
    pointerSupported = ('pointerdown' in window);

  skipClickDelay = function(e) {
    e.preventDefault();
    e.target.click();
  }

  setAriaAttr = function(el, ariaType, newProperty) {
    el.setAttribute(ariaType, newProperty);
  };
  setAccordionAria = function(el1, el2, expanded) {
    switch (expanded) {
      case "true":
        setAriaAttr(el1, 'aria-expanded', 'true');
        setAriaAttr(el2, 'aria-hidden', 'false');
        break;
      case "false":
        setAriaAttr(el1, 'aria-expanded', 'false');
        setAriaAttr(el2, 'aria-hidden', 'true');
        break;
      default:
        break;
    }
  };
  //function
var expanded;
switchAccordion = function(e) {
    console.log("triggered");
    e.preventDefault();
    var thisAnswer = e.target.parentNode.nextElementSibling;
    var thisQuestion = e.target;
    if(expanded) {
        setAccordionAria(expanded, thisAnswer, 'false');
        expanded.classList.toggle('is-collapsed');
        expanded.classList.toggle('is-expanded');
        var expandedAns = expanded.parentNode.nextElementSibling;
        expandedAns.classList.toggle('is-collapsed');
        expandedAns.classList.toggle('is-expanded');

        expandedAns.classList.toggle('animateIn');
        if(expanded == thisQuestion){
            expanded = undefined;
            return;
        }
    }

    if(thisAnswer.classList.contains('is-collapsed')) {
        setAccordionAria(thisQuestion, thisAnswer, 'true');
        expanded = thisQuestion;
    } else {
        setAccordionAria(thisQuestion, thisAnswer, 'false');
    }
    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('is-collapsed');
    thisAnswer.classList.toggle('is-expanded');

    thisAnswer.classList.toggle('animateIn');
};
  for (var i = 0, len = accordionToggles.length; i < len; i++) {
    if (touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if (pointerSupported) {
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();
* {
  box-sizing: border-box;
}

.heading-primary {
  padding: 3em 0em 0.5em 0em;
  text-align: left;
}

.accordion dl,
.accordion-list {
  border: 1px solid #ddd;
}

.accordion dl:after,
.accordion-list:after {
  content: "";
  display: block;
  height: 0.5em;
  width: 100%;
  background-color: #5c5c5c;
}

.accordion dd,
.accordion__panel {
  background-color: #E3F2FD;
  font-size: 1em;
  line-height: 1.5em;
}

.accordion p {
  padding: 1em 2em 1em 2em;
}

.accordion {
  position: relative;
  background-color: #eee;
}

.accordionTitle,
.accordion__Heading {
  text-align: left;
  font-weight: 500;
  padding: 1em;
  display: block;
  text-decoration: none;
  color: #424242;
  /*  -webkit-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out; */
  border-bottom: 1px solid #2a54a2;
}

.accordionTitle:before,
.accordion__Heading:before {
  content: "?";
  font-size: 1.5em;
  font-weight: bold;
  line-height: 0.5em;
  float: right;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.accordionTitle:hover,
.accordion__Heading:hover {
  background-color: #01579B;
  color: white;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
  background-color: #01579B;
  color: white;
}

.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
  content: "+";
  -webkit-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  transform: rotate(-225deg);
  font-size: 2.5em;
  font-weight: 100;
}

.accordionItem {
  height: auto;
  overflow: hidden;
  max-height: 50em;
  -webkit-transition: max-height 1s;
  transition: max-height 1s;
}

@media screen and (min-width: 48em) {
  .accordionItem {
    /*max-height: 15em;*/
    -webkit-transition: max-height 0.25s;
    transition: max-height 0.25s;
  }
}

.accordionItem.is-collapsed {
  max-height: 0;
}

.no-js .accordionItem.is-collapsed {
  max-height: auto;
}

.animateIn {
  -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
  animation: accordionIn 0.45s normal ease-in-out both 1;
}

.animateOut {
  -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
  animation: accordionOut 0.45s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(38px);
    transform: translateY(38px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(38px);
    transform: translateY(38px);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    /*
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0; */
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
    transform: scale(0.9) rotateX(-60deg);
  }
}

@keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
    transform: scale(0.9) rotateX(-60deg);
  }
}
<div class="container">
  <h3 class="heading-primary">Q&A</h3>
  <div class="accordion">
    <dl>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">First Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecejusto dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum r. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
        <p>Aliquam dapibus, ante quis fringilla </p>
      </dd>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Second Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus
          nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Third Accordion heading</a>
              </dt>
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.google.com">Test</a>adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus
          nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>


    </dl>
  </div>
</div>
 类似资料：
  • 手风琴

    手风琴效果其实就是通过JS改变元素的height，然后加上transition来让css动起来。 准备HTML结构 这里我们使用 dl ， 因为 dt 刚好可以模拟标题， dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>

  • jQuery手风琴防止手风琴更改

    我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题，我不希望你点击它，因为手风琴事件会触发。 所以 手风琴是可折叠的，如果您单击Test2（类nofunction），手风琴事件不应触发。但是如果您单击Test或其他表头，手风琴应该会触发事件。 我可以添加这个功能吗？ 更新测试http://jsfiddle.net/e3Q8d/，包括jQuery

  • 手风琴（Accordion）

    jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者，它被分成几个部分，可能看起来像标签。 jQueryUI提供了accordion（）方法来实现这一点。 语法 (Syntax) accordion()方法可以使用两种形式 - $（selector，context）.accordion（options）方法 $(selector, context).

  • 手风琴（Accordion）

    描述 (Description) 手风琴是一个图形控制元素，显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。 可折叠布局 当您使用单个单独的可折叠元素时，您需要省略accordion-list包装元素。 以下是可折叠布局的结构 - <!-- Single collapsible element ------> <div class = "acc

  • jQuery EasyUI 扩展 – 可编辑的树

    用法 创建树（Tree）     <ul id="tt"></ul>     $('#tt').etree({         url: 'tree_data.json',         createUrl: ...,         updateUrl: ...,         destroyUrl: ...,         dndUrl: ...     }); 设置

  • jQuery实现可展开合拢的手风琴面板菜单

    本文向大家介绍jQuery实现可展开合拢的手风琴面板菜单，包括了jQuery实现可展开合拢的手风琴面板菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单。分享给大家供大家参考。具体如下： 这是一款大家都常见的折叠菜单，手风琴折叠面板，会展开和合拢，带点Flash动画效果，修改时请注意： slideUp : 通过高度变化（向上减小）来动态地隐藏所有

相关问答

单击RadioButton在PrimeFaces中展开手风琴面板Primefaces手风琴板过滤器多个引导手风琴与折叠其他当点击一个手风琴如何在一个页面上展开/折叠多个单独的jquery手风琴使用引导表的可编辑扩展时出错

相关文章

JS实现手风琴特效Html5 js实现手风琴效果基于jquery的手风琴图片展示效果实现方法Bootstrap 手风琴菜单的实现代码js实现简单的手风琴效果

相关阅读

JavaScript之DOM扩展Objective-C扩展Vim编辑0.2 Verilog 编码风格Spring中的11个扩展点

相关工具

Chromium Updater 扩展Tweetmeme Chrome 扩展IconButton 扩展版何乐简约markdown编辑器可展开的UITableViewCell

相关文档

Flask 扩展文档汇总编写 Ruby 的 C 拓展Chrome 扩展及应用开发php-ext-xlswriter 高性能 Excel 扩展C 语言编码风格和标准
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.