我要插入 <img>
每个 <option>
中的标签,因为选项标签不接受其中的标签,我想使用 ul
制作选择框和 li
右侧每个选项内都有取消图标。
$('.select ul li.option').click(function() {
$(this).siblings().children().remove();
var a= $(this).siblings().toggle();
console.log( $(a).is(":visible"));
$(this).siblings().append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
// $(this).addClass('darr');
})
.select ul li.option {
background-color: #DEDEDE;
box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
-webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
-moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}
.select ul li.option:hover {
background-color: #B8B8B8;
}
.select ul li.option {
z-index:1;
padding:5px;
display:none;
}
.select ul li:first-child {
display:block;
}
.select ul li {
cursor:default;
}
.rarr:after, .darr:after {
content: ' ▼ ';
float:left;
padding:0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<ul style="width:150px;">
<li values="1" class="option">Dropdown one</li>
<li values="2" class="option">Dropdown two</li>
<li values="3" class="option">Dropdown three</li>
<ul>
</div>
还是有问题
1) 打开时子弹出现在左边。
2) 取消图像不会在关闭时消失。
谢谢
最佳答案
可以使用 list-style:none
css 规则消除子弹。
除此之外,您必须稍微调整您的代码以使其按您的预期使用。
$('.select ul li.option').click(function() {
//use addBack to add the clicked element to the collection.
$(this).siblings().addBack().children().remove();
var a = $(this).siblings().toggle();
$(this).siblings().append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
//prepend the clicked element to the parent UL
$(this).parent().prepend(this);
})
DEMO
关于javascript - 使用 ul 和 li 标签选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38346426/