如何实现点击+按钮添加对应社交图标的列表项功能？

没问题，我来帮你搞定这个需求！咱们分两部分实现：先处理「+按钮显示/隐藏添加区块」，再完成「添加新社交账号到列表」的功能。

1. 先给HTML加个初始隐藏样式（可选但更友好） #

首先给show_social加个默认隐藏的CSS，这样页面加载时它不会突兀显示：

.show_social {
  display: none;
  margin-top: 10px; /* 加个间距让排版更美观 */
}

2. JavaScript核心逻辑实现 #

我们用原生JavaScript来写，不依赖额外库，兼容性更好：

// 先获取需要操作的DOM元素
const addSocialBtn = document.getElementById('add_social_top');
const showSocialBlock = document.querySelector('.show_social');
const socialSelect = showSocialBlock.querySelector('select');
const socialInput = showSocialBlock.querySelector('.txt_select');
const addBtn = showSocialBlock.querySelector('button[type="submit"]');
const socialList = document.querySelector('.item_socails ul');

// 1. 点击+按钮，切换添加区块的显示/隐藏状态
addSocialBtn.addEventListener('click', () => {
  showSocialBlock.style.display = showSocialBlock.style.display === 'none' ? 'block' : 'none';
  // 显示区块时自动聚焦输入框，提升用户操作流畅度
  if (showSocialBlock.style.display === 'block') {
    socialInput.focus();
  }
});

// 2. 定义社交平台与Font Awesome图标的映射关系
const socialIconMap = {
  '1': 'fa-twitter',       // Twitter对应的图标类
  '2': 'fa-linkedin-in',   // LinkedIn对应的图标类
  '3': 'fa-facebook-f'     // Facebook对应的图标类
};

// 3. 点击Add按钮，添加新的社交账号条目
addBtn.addEventListener('click', () => {
  const selectedPlatform = socialSelect.value;
  const inputContent = socialInput.value.trim();

  // 先校验输入是否为空，避免无效添加
  if (!inputContent) {
    alert('请输入社交账号内容哦！');
    return;
  }

  // 创建新的<li>元素，组装图标和输入框
  const newSocialItem = document.createElement('li');
  newSocialItem.innerHTML = `
    <i class="fa ${socialIconMap[selectedPlatform]}"></i>
    <input value="${inputContent}" type="text">
  `;

  // 把新条目插入到列表的倒数第二个位置（在+按钮的<li>前面）
  socialList.insertBefore(newSocialItem, socialList.lastElementChild);

  // 清空输入框并隐藏添加区块，完成操作
  socialInput.value = '';
  showSocialBlock.style.display = 'none';
});

功能细节说明 #

• 点击右上角的+按钮，show_social区块会切换显示/隐藏；
• 选择社交平台、输入账号内容后点击Add，会自动在现有社交列表末尾（+按钮前）新增对应条目；
• 加入了输入空值校验，避免无效内容被添加；
• 显示添加区块时自动聚焦输入框，优化用户操作体验。

内容的提问来源于stack exchange，提问作者priMo-ex3m