使用 ul 和 li 标签选择框

Question

我想在每个<option>插入<img>标签，因为选项标签不接受其中的标签，我想使用ul和li制作选择框，右侧每个选项内都有取消图标。

到目前为止，这是我的 jsfiddle

 $('.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）取消图像在关闭时不会消失。

谢谢

Answer 1

可以使用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);
  })

演示

Answer 2

这是更新的JSfiddle

缺少 UL 标签的关闭

<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>

Answer 3

至于子弹；

.select ul {
    list-style: none;
}

Answer 4

将此添加到您的 CSS 以隐藏项目符号

.select ul {
    list-style: none;
}

以及关闭时图像不消失的问题，如果您以正确的方式关闭标签就可以了。 你没有在你的代码中关闭 ul

<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>

试试这个：

 $('.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{ list-style:none; } .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.0.0/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>

Answer 5

你可以试试这个：

你必须添加像</ul>这样的 ul 关闭标签

<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>

演示在这里