自定义选择和选项元素

Question

我想要制作的图片：

我想制作一个自定义选择+选项下拉菜单。有没有办法在选项标签中包含内容，或者我最好使用jQuery和元素制作下拉菜单：

<div class="dropDown">
<ul>
    <li>Option 1 html here</li>
    <li>Option 2 html here</li>
    <li>Option 3 html here</li>
    <li>Option 4 html here</li>
</ul>
</div>

Answer 1

假设您在下拉菜单中的内容保持不变，则可以使用纯css完成此操作。

Answer 2

也许你想要的，这是一个简单的示例代码：

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.dropDown').click(function(){
    $(this).find('ul').slideToggle();
  });
  $('li').click(function(){
    var text = $(this).find('h1').text();
    $('#click').text(text);
  });
});

＆＃13;

li{
  cursor:pointer;  
  background:#000;
  display:block;
  }
li div{
  background-image:url('http://netweaver.com.au/floatHouse/pics/red.gif');
  width:50px;
  height:50px;
  float:left;
  }
li h1{
  background:#333;
  color:#eee;
  font-size:12px;
  }
li p{
  background:#666;
  color:#222;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDown"><div id='click'>Click Me</div>
<ul>
    <li><div></div><h1>Title 1</h1><p>Option 1 html here</p></li>
    <li><div></div><h1>Title 2</h1><p>Option 2 html here</p></li>
    <li><div></div><h1>Title 3</h1><p>Option 3 html here</p></li>
    <li><div></div><h1>Title 4</h1><p>Option 4 html here</p></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;