个人中心
gpt4 book ai didi

javascript - ul 扩展器列表未按预期运行

转载 作者：行者123 更新时间：2023-11-27 22:51:53 26 4
gpt4 key购买 nike

我正在尝试创建类似于 this 的扩展器.我的意思是，当用户单击 Section xx 时，这应该展开到底部。现在，当用户点击时，它看起来像:

enter image description here

但我希望它是这样的: enter image description here

Fiddle

这里是 js:

 let sectionIndex = 0;

    function addSection(position, relation) {
      const template = `
    <li class="section">
      <button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">&#8593;</button>
      <button aria-label="Add section below" class="section__button section__button--down" value="afterend">&#8595;</button>
      <span class="section__label collapsible"><button class="collapsible">Section ${++sectionIndex}</button> 
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea
              commodo consequat.</p>
          </div>
      </span>     
    </li>`;
      relation.insertAdjacentHTML(position, template);

    }

    const sections = document.querySelector('.js-sections');
    sections.addEventListener('click', function (event) {
      const button = event.target.closest('.section__button');
      if (button !== null) {
        const position = button.value;
        const relation = button.parentElement;
        addSection(position, relation);
      }
      event.preventDefault();
    });

    $(document).on('click', '.collapsible', function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });

最佳答案

这个怎么样。基本上我已经删除了 .section__label 类中的 flex 属性。这就是导致元素彼此相邻的原因，如果您仍然需要 flex，您也可以尝试将 flex-direction 更改为 column。

我添加了一个新类 .section__label button { display:block;宽度:100%； } 只是为了更符合您想要的风格。

您仍然需要处理父容器的边框样式和大小。但这对您来说是一个开始。

<style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .section {
      display: grid;
      grid-template-rows: 3em 3em;
      grid-template-columns: 3em 1fr;
      grid-template-areas:
        "up label"
        "down label";
      background-color: #f7f7f7;
      border: 1px solid #d8d8d8;
      border-radius: 5px;
      margin: 0.5em 0;
      overflow: hidden;
    }

    .section__button {
      appearance: none;
      background-color: #d8d8d8;
      font-size: 1em;
      border: 0;
      padding: 1em;
      margin: 0;
      color: white;
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 250ms ease-in-out, background-color 250ms ease-in-out;
      ;
    }

    .section__button:focus {
      outline: 0;
    }

    .section:hover .section__button {
      opacity: 1;
    }

    .section__button--up {
      grid-area: up;
    }

    .section:hover .section__button--up {
      background-color: #215467;
    }

    .section__button--down {
      grid-area: down;
    }

    .section:hover .section__button--down {
      background-color: #e2a418;
    }

    .section:hover .section__button:hover {
      background-color: #55c773;
    }

    .section__label {
      grid-area: label;
      padding: 2em 5em 2em 2em;
    }
    
    .section__label button {
      display: block;
      width: 100%;
    }

    /*collapsible*/
    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
      grid-column: 2;
    }

    .collapsible {
      cursor: pointer;
    }

    .collapsible>button {
      border: none;
    }
  </style>
</head>

<body>
  <ul class="js-sections">
    <li>
      <div class="section">
        <button aria-label="Add section above" class="section__button section__button--up "
          value="beforebegin">&#8593;</button>
        <button aria-label="Add section below" class="section__button section__button--down "
          value="afterend">&#8595;</button>
        <span class="section__label collapsible"><button class="collapsible">Section 0
          </button>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea
              commodo consequat.</p>
          </div>
        </span>
      </div>
    </li>
  </ul>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  <script>
    let sectionIndex = 0;

    function addSection(position, relation) {
      const template = `
    <li class="section">
      <button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">&#8593;</button>
      <button aria-label="Add section below" class="section__button section__button--down" value="afterend">&#8595;</button>
      <span class="section__label collapsible"><button class="collapsible">Section ${++sectionIndex}</button> 
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea
              commodo consequat.</p>
          </div>
      </span>     
    </li>`;
      relation.insertAdjacentHTML(position, template);

    }

    const sections = document.querySelector('.js-sections');
    sections.addEventListener('click', function (event) {
      const button = event.target.closest('.section__button');
      if (button !== null) {
        const position = button.value;
        const relation = button.parentElement;
        addSection(position, relation);
      }
      event.preventDefault();
    });

    $(document).on('click', '.collapsible', function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  </script>

关于javascript - ul 扩展器列表未按预期运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59399113/

26 4 0
文章推荐： javascript - 在网页内的图像上标记矩形以选择感兴趣的区域
文章推荐： html - 打开下载对话框的链接
文章推荐： c++ - 调试断言失败(缓冲区太小)构造函数初始化
文章推荐： html - 如何在 GWT 1.5 中设置水平拆分器面板的样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com