利用CSS实现酷炫的下拉框特效

  
        $(‘.select>p’).on("click", function (e) {   
            $(‘.select’).toggleClass(‘open’);   
            cancelBubble(e);   
        });   
  
        $(document).on(‘click’, function () {   
            $(‘.select’).removeClass(‘open’);   
        })   
    })   
  
    function cancelBubble(event) {   
        if (event.stopPropagation) {   
            event.preventDefault();   
            event.stopPropagation();   
        } else {   
            event.returnValue = false;   
            event.cancelBubble();   
        }   
    }   
</script>  

1、首先为 p 标签绑定 click 事件，在触发的时候，为 select 添加或移除 open class, 也就是将 ul 显示出来。

2、为 li 绑定 click 事件，当选中了一个 li 元素的时候，首先获取到 data-value，然后将其赋值给 p 标签，然后为选中的 li 添加 selected class,与此同时利用 siblings() 方法，让兄弟节点的 selected class 移除。

3、为 document 设置click 事件，当我们点击网页中任何一处地方的时候，如果 ul 是打开的，就将其关闭，不过这个时候由于所有元素都在 document 内，所以我们需要阻止事件冒泡，调用自己写的 cancelBubble() 方法。

总结
好了，本文的内容到这就基本介绍了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。