jquery 实现 手风琴 箭头旋转

好的，下面是一个使用 jQuery 实现手风琴和箭头旋转的示例代码：

HTML代码：

<div class="accordion">
  <div class="accordion-header">
    <h3>标题1</h3>
    <i class="arrow"></i>
  </div>
  <div class="accordion-body">
    <p>内容1</p>
  </div>
  
  <div class="accordion-header">
    <h3>标题2</h3>
    <i class="arrow"></i>
  </div>
  <div class="accordion-body">
    <p>内容2</p>
  </div>
  
  <div class="accordion-header">
    <h3>标题3</h3>
    <i class="arrow"></i>
  </div>
  <div class="accordion-body">
    <p>内容3</p>
  </div>
</div>

CSS代码：

.accordion {
  border: 1px solid #ddd;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
  background-color: #f7f7f7;
}

.accordion-header:hover {
  background-color: #e5e5e5;
}

.accordion-header h3 {
  margin: 0;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-body p {
  margin: 0;
  padding: 10px;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  transition: transform 0.3s ease-out;
}

.arrow.active {
  transform: rotate(180deg);
}

jQuery代码：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    $(this).toggleClass('active');
    $(this).next('.accordion-body').slideToggle();
    $(this).find('.arrow').toggleClass('active');
    $('.accordion-header').not(this).removeClass('active');
    $('.accordion-header').not(this).next('.accordion-body').slideUp();
    $('.accordion-header').not(this).find('.arrow').removeClass('active');
  });
});

这段代码实现了一个手风琴下拉菜单，并且点击标题时箭头会旋转。您可以根据需要进行修改和优化。