Question

我想在每个<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）取消图像不会在关闭时消失。

感谢

Answer 1

使用<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#e4e4e4" android:orientation="horizontal" > <Switch android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CIR" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:checked="true" android:gravity="center" android:id="@+id/newProject_switch" android:layout_below="@+id/newProject_networkId" android:layout_alignParentLeft="true" android:layout_gravity="center_vertical" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Best Effort" android:textSize="15dp" android:id="@+id/textView2" android:layout_alignBottom="@+id/newProject_switch" android:layout_gravity="right|center_vertical" android:layout_toRightOf="@+id/newProject_switch" /> </LinearLayout> css规则可以根除项目符号。

除此之外，您必须稍微调整一下代码，以使其可以按照您的预期使用。

list-style:none

DEMO

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

至于子弹;

convolution matrix

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>  <!--  use </ul> not <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 close标记，例如</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>

DEMO HERE

使用ul和li标签选择框

5 个答案:

DEMO