自定义下拉列表

Question

所以我正在设计一个自定义的 DropDownList 我需要将它作为一个普通的下拉列表给用户 这是 HTML

<div class="select" id="long">
  <img src="img/pin.jpg" class="select_img" />
  <div class="select_text">
    Newsletter
  </div>
  <div class="select_arrow">
    <>
  </div>
  <ul>
    <li>this</li>
    <li>that</li>
    <li>duck</li>
    <li>deck</li>
  </ul>
</div>
<div class="select" id="short">
  <img src="img/clk.jpg" class="select_img" />
  <div class="select_text">
    Contact
    </div>
    <div class="select_arrow">
      <>
    </div>
    <ul>
      <li>this</li>
      <li>that</li>
      <li>duck</li>
      <li>deck</li>
    </ul>
  </div>
</div>

如您所见，我在这里有两个 DropDownList 项目，一个很长，另一个很短 这是CSS

/*ID's*/

img#logo {display: inline-block;float: left; height: 55px; width: 155px;}
div#long {margin-left: 330px;}
div#long .select_text { width: 85px;}
div#long ul {width: 147px; display: none;}
div#short {margin-left: 16px;}
div#short .select_text { width: 57px;}
div#short ul {width: 119px; display: none;}

/* Classes */

.select{
    position: relative;
    height: 31px;
    display: inline-block;
    float: left;
    margin-top: 10px;
    font-family: nexa;
    color: #959595;
    font-size: 10px;

}
.select_img{
    display: inline-block;
    float: left;
    width: 31px;
    height: 31px;
    background-color: #fff;
    cursor: pointer;
}
.select_text{
    display: inline-block;
    float: left;
    height: 31px;
    background-color: #fff;
    cursor: pointer;
    text-indent: 3px;
    line-height: 32px;
}
.select_arrow{
    display: inline-block;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    background-color: #ebebeb;
    color: #959595;
    width: 31px;
    height: 30px;
    border-bottom: 1px #d8d8d8 solid;
    font-size: 11px;
    line-height: 32px;
    text-indent: 6px;
    font-family: Quicksand;
    font-weight: bold;
    cursor: pointer;
    text-indent: 10px;
}

.select ul li{
    text-indent: 34px;
    width: 100%;
    background-color: #fff;
    cursor: pointer;

}
.select ul li:hover{
    background-color: #f26c4f;
}

现在，我的问题是：

当我单击任何div.select 子项时，我想显示我单击的同一个div 的ul，我尝试了$(this).children('ul).slideDown('normal');，但没有成功:(

我需要这样的方式，我想用$(this)选择器

我不想使用这样的方式：

$('#select_img, #select_text, select_arrow').click(function(){
    $('#long ul').slideDown('normal');
}); 

我希望它是通用的：当我点击任何 div 元素时，它会显示 ul。

Answer 1

为什么要绑定IDs 上的事件？它应该在课堂上。

代码：

$('.select_img, .select_text, .select_arrow').click(function(){
    $(this).siblings('ul').slideDown();
});

小提琴：http://jsfiddle.net/k7699nar/

Answer 2

$(this).find('ul').slideDown('slow');

假设您的$(this) 被正确抓取，我也不认为“正常”是slideDown() 的选项