如何实现点击图片后触发slidedown下滑效果的功能

实现逻辑和你之前给div绑定事件的思路完全一致，仅需要把事件绑定对象更换为img元素，核心是建立图片和对应下拉列表的关联关系。

1. 基础HTML结构搭建 #

给每张品牌图片添加自定义属性关联对应列表，列表默认隐藏，直接放在对应图片下方即可：

<!-- 奥迪品牌板块 -->
<img src="audi-logo.png" alt="奥迪品牌logo" class="brand-logo" data-target="audi-list">
<ul id="audi-list" class="model-list" style="display:none;">
  <li>奥迪A4L</li>
  <li>奥迪A6L</li>
  <li>奥迪Q5L</li>
</ul>

<!-- 宝马品牌板块 -->
<img src="bmw-logo.png" alt="宝马品牌logo" class="brand-logo" data-target="bmw-list">
<ul id="bmw-list" class="model-list" style="display:none;">
  <li>宝马3系</li>
  <li>宝马5系</li>
  <li>宝马X3</li>
</ul>

2. jQuery实现方案 #

如果你之前用jQuery实现div的slidedown，直接修改绑定对象即可，还可以额外加点击收起其他列表的交互：

$('.brand-logo').on('click', function() {
  // 获取当前点击图片关联的列表
  const targetList = $(`#${$(this).data('target')}`);
  // 收起其他所有车型列表
  $('.model-list').not(targetList).slideUp();
  // 切换当前列表的展开/收起状态
  targetList.slideToggle();
})

如果是动态渲染的图片，可以用事件委托避免重复绑定：

$(document).on('click', '.brand-logo', function() {
  // 同上逻辑
})

3. 原生JS实现方案 #

不需要依赖jQuery也可以实现同等动画效果：

/* 提前给列表加全局样式 */
.model-list {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  margin: 0;
  padding: 0;
}

document.querySelectorAll('.brand-logo').forEach(logo => {
  logo.addEventListener('click', function() {
    const targetList = document.getElementById(this.dataset.target);
    // 收起其他所有列表
    document.querySelectorAll('.model-list').forEach(list => {
      if(list.id !== this.dataset.target) list.style.height = '0';
    })
    // 切换当前列表状态
    targetList.style.height = targetList.style.height ? '' : `${targetList.scrollHeight}px`;
  })
})

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