为同class的多个ul标签添加按需显示/隐藏的“查看更多”按钮

嘿，我来帮你搞定这个列表折叠展开的需求！下面是完整的实现方案，适配你提到的多个相同class的<ul>标签，直接就能套用：

1. 调整后的HTML结构 #

你原来的HTML可以保留，不需要手动修改li，我们用JS动态处理：

<ul class="tips-detail-list" style="margin-bottom: 30px">
  <li><b>Type :</b> Hill Fort</li>
  <li><b>Grade : </b>Medium</li>
  <li><b> Endurance Level:</b> Moderate</li>
  <li><b>Height :</b> 1200m</li>
  <li><b>Best Time :</b> October to March</li>
</ul>

<ul class="tips-detail-list" style="margin-bottom: 30px">
  <li><b>Type :</b> Waterfall</li>
  <li><b>Grade : </b>Easy</li>
  <li><b>Endurance Level:</b> Low</li>
  <li><b>Location :</b> Western Ghats</li>
</ul>

<ul class="tips-detail-list" style="margin-bottom: 30px">
  <li><b>Type :</b> Forest Trek</li>
</ul>

2. CSS样式 #

先写基础样式，控制隐藏的li和按钮样式：

/* 隐藏超出数量的li */
.hidden-li {
  display: none;
}

/* 链接样式，可根据需求调整 */
.toggle-link {
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}

.toggle-link:hover {
  text-decoration: underline;
}

3. JavaScript逻辑 #

核心功能实现，你可以自定义要显示的li数量（比如下面的showCount = 3）：

// 设定默认显示的li数量
const showCount = 3;

// 获取所有目标ul
const tipLists = document.querySelectorAll('.tips-detail-list');

tipLists.forEach(list => {
  const allLis = list.querySelectorAll('li');
  const totalLis = allLis.length;

  // 如果li数量超过设定值，才添加折叠功能
  if (totalLis > showCount) {
    // 给超出的li添加隐藏类
    for (let i = showCount; i < totalLis; i++) {
      allLis[i].classList.add('hidden-li');
    }

    // 创建切换链接
    const toggleLink = document.createElement('span');
    toggleLink.classList.add('toggle-link');
    toggleLink.textContent = '查看更多';
    list.appendChild(toggleLink);

    // 绑定点击事件
    toggleLink.addEventListener('click', () => {
      // 切换所有隐藏li的显示状态
      allLis.forEach((li, index) => {
        if (index >= showCount) {
          li.classList.toggle('hidden-li');
        }
      });

      // 切换链接文字
      toggleLink.textContent = toggleLink.textContent === '查看更多' ? '收起' : '查看更多';
    });
  }
});

功能说明 #

• 每个.tips-detail-list会自动检查内部li数量，只有当数量超过你设定的showCount时，才会显示“查看更多”链接
• 点击“查看更多”会显示剩余所有li，同时文字变成“收起”；再次点击会隐藏剩余li，恢复成“查看更多”
• 样式可以根据你的页面风格自定义，比如修改链接颜色、间距等

内容的提问来源于stack exchange，提问作者Rajat Audichya