华丽的下拉菜单，点击时更改图标的jquery

以下是一个使用jQuery实现华丽的下拉菜单，并在点击时更改图标的示例代码：

HTML代码：

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown">
    菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

CSS代码：

.dropdown-toggle .caret {
  transition: transform 0.3s;
}
.dropdown-toggle.active .caret {
  transform: rotate(180deg);
}

JavaScript代码：

$(document).ready(function() {
  $('.dropdown-toggle').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown-menu').slideToggle();
  });
});

在这个示例中，我们使用了一个包含下拉菜单的<div>元素，并在其中放置了一个按钮和一个下拉菜单列表。当点击按钮时，我们使用slideToggle()方法来显示或隐藏下拉菜单，并使用toggleClass()方法来切换按钮的active类。同时，我们使用CSS的transform属性来旋转图标。

通过添加上述代码，你就可以得到一个华丽的下拉菜单，点击时能够更改图标的效果。