Javascript Accordion更改img取决于它是打开还是关闭

JavaScript Accordion是一种常用的前端开发技术，用于创建可折叠的内容面板。当用户点击面板标题时，面板可以展开或折叠，以显示或隐藏相关内容。根据面板的打开或关闭状态，可以通过更改img元素的属性来改变图片。

Accordion的实现通常使用HTML、CSS和JavaScript。HTML用于创建面板的结构，CSS用于定义面板的样式，而JavaScript用于处理面板的交互行为。

在实现Accordion时，可以使用JavaScript来监听面板标题的点击事件。当面板打开时，可以通过修改img元素的src属性来更改图片，以显示打开状态的图标。同样，当面板关闭时，可以通过修改img元素的src属性来更改图片，以显示关闭状态的图标。

以下是一个示例代码，展示了如何使用JavaScript Accordion来更改img元素的图片：

HTML部分：

<div class="accordion">
  <div class="panel">
    <div class="panel-header" onclick="togglePanel(1)">
      <h2>面板标题1</h2>
      <img id="img1" src="closed.png" alt="关闭图标">
    </div>
    <div id="panel1" class="panel-content">
      <!-- 面板内容1 -->
    </div>
  </div>
  <div class="panel">
    <div class="panel-header" onclick="togglePanel(2)">
      <h2>面板标题2</h2>
      <img id="img2" src="closed.png" alt="关闭图标">
    </div>
    <div id="panel2" class="panel-content">
      <!-- 面板内容2 -->
    </div>
  </div>
</div>

CSS部分：

.panel-header {
  cursor: pointer;
}

.panel-content {
  display: none;
}

.panel-content.active {
  display: block;
}

JavaScript部分：

function togglePanel(panelNumber) {
  var panel = document.getElementById("panel" + panelNumber);
  var img = document.getElementById("img" + panelNumber);

  if (panel.style.display === "none") {
    panel.style.display = "block";
    img.src = "opened.png";
  } else {
    panel.style.display = "none";
    img.src = "closed.png";
  }
}

在上述代码中，每个面板都有一个唯一的ID（例如panel1、panel2），以及一个对应的img元素（例如img1、img2）。当面板标题被点击时，togglePanel函数会根据面板的当前状态来切换面板的显示与隐藏，并相应地更改img元素的src属性。

这是一个基本的Accordion实现示例，可以根据实际需求进行样式和功能的定制。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品进行开发和部署。具体推荐的腾讯云产品和产品介绍链接地址可以根据实际情况进行选择。