jquery 仿select

代肖宇 3个月前 32浏览 0评论

jQuery是一款非常强大的JavaScript库,它可以轻松实现各种网页动态效果。其中,仿select功能也是jQuery中非常实用的一个特性。

<!-- HTML 代码 -->
<div class="fake-select">
  <div class="current-item">请选择</div>
  <ul class="option-list">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

<!-- jQuery 代码 -->
$('.fake-select').on('click', function () {
  $(this).toggleClass('opened');
});

$('.option-list li').on('click', function () {
  var $this = $(this),
      text = $this.text();
  $this.parent().siblings('.current-item').text(text);
});

以上代码实现了一个简单的仿select效果。当点击div.fake-select时,会切换opened类,从而显示或隐藏选项列表。选项列表中的每个li元素被点击时,将获取其文本内容,并设置为当前项的文本显示。