javascript - 多个下拉菜单——一个Jquery代码

Question

我希望创建一个具有多个下拉选择菜单的表单。我是 JQuery 的新手，希望有人能帮助我解决我的问题。我试图弄清楚如何让每个列表单独运行，而不必复制 JQuery 代码。这可能吗？这是我当前的代码笔:http://codepen.io/kelseyhisek/pen/HbGDm

<h1>Dead Simple Dropmenu</h1>
<div class="ds_select">
  <div class="ds_label ds_placeholder">Select me...</div>
  <ul class="ds_list">
      <li><a href="#what">What?</a></li>
      <li><a href="#its">It's</a></li>
      <li><a href="#that">That</a></li>
      <li><a href="#easy">Easy?</a></li>
    </ul>
</div>

<div class="ds_select">
  <div class="ds_label ds_placeholder">Select me...</div>
  <ul class="ds_list">
      <li><a href="#what">What?</a></li>
      <li><a href="#its">It's</a></li>
      <li><a href="#that">That</a></li>
      <li><a href="#easy">Easy?</a></li>
    </ul>
</div>

@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
body{
  text-align:center;
  font-family:Lato;
  color:#999
}
.ds_select,
.ds_select *
    {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
    }
.ds_placeholder{
  padding:15px 18px;
  position:relative;
  height:50px;
  z-index:2;
}

.ds_select
    {
        display: inline-block;
        position: relative;
        line-height: 1;
        width: 200px;
        max-height:50px;
        padding: 0px;
        border: 3px solid #5e5e5e;
        background: #ffffff;
        color: #444444;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        outline: 0;
      overflow:hidden;
        cursor: pointer;
       transition:all 0.3s
    }


    .ds_select:before,
    .ds_select:after
        {
            content: "\25B2";
            position: absolute;
            right: 10px;
            top: 12px;
            font-size: 7px;
        }

    .ds_select:after
            {
                content: "\25BC";
                top: 20px;
            }


    .ds_select:hover,
    .ds_select.open{ border-color: #000000; }
    .ds_select.open{max-height:600px }


    .ds_select .ds_label
        {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }


    .ds_select .ds_list
        {

            margin-top: -30px;
            opacity:0;
            width: inherit;
            z-index: 1;
            padding: 0;
          transition:all 0.2s
        }


        .ds_select.open .ds_list { opacity:1;
         margin-top: 0px;}



        .ds_select .ds_list li a
            {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display:block;  
                position: relative;
                padding: 10px 10px;
                list-style-type: none;
                color:#999;
                text-decoration:none
            }


            .ds_select li a:hover
                {
                    background: #eee;
                    color: #000;

                }
$('.ds_placeholder').on('click',function(e){
  e.preventDefault();
  if($('.ds_select').hasClass('open'))
    $('.ds_select').removeClass('open');
  else
     $('.ds_select').addClass('open');
});

//Or just remove this and go to link

$('.ds_list a').on('click',function(e){
  e.preventDefault();
  $('.ds_placeholder').text($(this).text());
  $('.ds_select').removeClass('open');
});

Answer 1

啊，所以问题是在您的点击处理程序中，您选择的“.ds_select”正在全局寻找具有类 .ds_select 的所有 div。然后它将开放类添加到所有。我想你想要的是你的点击处理程序中的这个:

 $('.ds_placeholder').on('click',function(e){
     e.preventDefault();
     var $dropdown = $(this).parents('.ds_select');

     $dropdown.toggleClass('open');
 });

出于同样的原因，您需要像这样更新占位符:

 $('.ds_list a').on('click',function(e){
   e.preventDefault();
   var $dropdown = $(this).parents('.ds_select');
   var $placeholder = $dropdown.find(".ds_placeholder");

   $placeholder.text($(this).text());
   $dropdown.removeClass('open');
 });

下拉菜单将另一个下拉菜单推到底部似乎也存在问题；

我认为您可以通过将 vertical-align: top; 添加到您的 ds_select 类来解决这个问题，但我对 CSS 不是很感兴趣。所以也许其他人会插话。

更新 使用 toggleClass 来简化帽子提示 Steve Sanders