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

啊，问题是你的点击处理程序里面你选择＆＃34; .ds_select＆＃34;这是使用类.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');
 });

看起来还有一个问题，下拉菜单将另一个下拉菜单推到底部;

我认为你可以通过向你的ds_select类添加vertical-align: top;来解决这个问题，但我对CSS不太热。所以也许其他人会参与进来。

更新使用toggleClass来简化帽子史蒂夫桑德斯

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

1 个答案: