介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> fruit
& lt; style 类型=拔谋?css"比;
.hide {
,显示:没有;
}
div {
,浮动:左;
,宽度:100%;
}
.selector-containter {
,margin-bottom: 10 px;
}
.selector {
,宽度:200 px;
,背景:# FFF;
,边界:1 px solid # DDD;
}
.selector-hint {
,宽度:178 px;
,边界:1 px solid # DDD;
}
.selector-expand {
,宽度:8 px;
,边界:1 px solid # DDD;
}
.selector-collapse {
,宽度:8 px;
,边界:1 px solid # DDD;
}
& lt;/style>
& lt; https://www.yisu.com/zixun/script src=" jquery-3.2.1.min.js ">
<脚本>
$(文档)时函数(){//使用的方法,采用事件委派机制,selector-option-container中的内容为后续动态追加
$ (' .selector ')。('点击','。selector-expand’,函数(){
(美元).parent()定格(.selector-option-container)定格().remove ();
美元(这).parent()定格(“.selector-option-container”)。追加(“
选择水果
选择水果
这篇文章主要介绍jquery + css如何实现下拉列表功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体代码如下所述:
杏
');
美元(这).parent()定格(“.selector-option-container”)。追加(“香蕉
');
(美元).nextAll (.selector-option-container) .removeClass(隐藏的);
});
$ (' .selector ')。('点击','。selector-collapse’,函数(){
(美元).nextAll (.selector-option-container) .addClass(隐藏的);
});
$ (' .selector-t1 ')。('点击','。selector-option’,函数(){
(美元).parent () .parent()定格(.selector-hint)。text($(这)。text ());
美元(这).parent () .addClass(隐藏的);
});
$ (' .selector-t1 ')。('点击','。selector-checkbox’,函数(){
(美元).parent () .parent () .parent()定格(.selector-hint)。text($(这).parent () . next ()。text ());//采用道具方法,对于值为布尔型的属性赋值
(美元)。道具(“检查”,假);
(美元).parent () .parent () .addClass(隐藏的);
});
});>
-
-