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

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

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

Answer 2

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

代码：

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

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

自定义下拉列表

2 个答案: