如何为两个单独列表中的列表项创建显示更多按钮？答案

【问题标题】：How to create a show more button for list items in two separate lists?如何为两个单独列表中的列表项创建显示更多按钮？
【发布时间】：2023-01-10 01:05:41
【问题描述】：

我正在尝试创建一个显示更多按钮，该按钮将一起显示所有 li 元素。但目前他们似乎正在采用块级显示，即使我已经明确提到了display:inline。我想将所有营销 li's 放在人力资源旁边，就像之前所有 li's 一样。

有人可以帮我解决这个问题吗？任何帮助，将不胜感激：）

function showMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("show-more");
  var btnText = document.getElementById("show-more-button");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Show more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Show less";
    moreText.style.display = "inline";
  }
}

#show-more {
  display: none;
}

#show-more li {
  display: inline-flex;
  flex-wrap: wrap;
}

> There is another `ul` which has all the `li's` from Engineering to Human Resources in it.

<div class="topics-right">
      <p>SUGGESTED SEARCHES</p>
      <ul class="style-topics">
        <li><a href="#" class="style-topic"> Engineering</a></li>
        <li><a href="#" class="style-topic">Business Development</a></li>
        <li><a href="#" class="style-topic">Finance</a></li>
        <li>
          <a href="#" class="style-topic">Administrative Assistant</a>
        </li>
        <li><a href="#" class="style-topic">Retail Associate</a></li>
        <li><a href="#" class="style-topic">Customer Service</a></li>
        <li><a href="#" class="style-topic">Operations</a></li>
        <li><a href="#" class="style-topic">Information Technology</a></li>
        <li><a href="#" class="style-topic">Marketing</a></li>
        <li><a href="#" class="style-topic">Human Resources</a></li>
      </ul>
        <span id="dots"></span>
        <ul id="show-more">
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
          <li><a href="#" class="style-topic">Marketing</a></li>
        </ul>
      <button onclick="showMore()" id="show-more-button">Show More</button>
    </div>

【问题讨论】：

inline-flex 应该是容器而不是物品。弹性项目将根据容器的弹性选项显示。默认情况下通常是“内联”的，因为除非涉及换行，否则默认情况下 flex 项目会一个接一个地显示。简而言之，只需删除您的 css 规则并使用 #show-more{display: flex;} ... 是的，该元素仅作为 <ul> 或 <ol> 有效，因为包含 <li>。在你为每个列表项都有一个 flex 容器之前，但由于它们是 inline-flex，它们也恰好是内联的
@DiegoD 我按照你的建议做了。但现在所有元素都出现在一条垂直线上。您能否就此提供任何意见？
@isherwood 第一个列表项是完整列表的一部分。请看图片。我想将所有在人力资源旁边进行营销的人员放在一起。
@isherwood 是的，这是从工程到人力资源的另一个 ul 的一部分。我只想在单击“显示更多”按钮时将此 ul 放在它旁边。

标签： javascript html css

【解决方案1】：

您的意思是您希望列表的其余部分与列表的第一个元素内联吗？因为你的 div 中的所有列表项确实是内联的

【讨论】：

请看图片。我想以与人力资源之前的方式类似的方式，将所有在人力资源旁边进行营销的人员放在一起。
这没有回答问题。请参阅How to Answer。