Multiple dropdown menus - one Jquery code

Question

I am hoping to create a form with multiple dropdown selection menus. I'm pretty new at JQuery and was hoping someone could help me to figure out my problem. I'm trying to figure out how to get each list to function individually, without having to duplicate the JQuery code. Is this possible? Here is my current codepen : 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');
});

CambridgeMike · Accepted Answer · 2014-11-05 17:34:17Z

2

Ah, so the problem is that inside your click handlers your selecting ".ds_select" which is looking globally for all divs with the class .ds_select. It then adds the open class to all of them. I think what you want is this inside your click handler:

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

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

By the same token you'll want to update the placeholder like this:

 $('.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');
 });

Looks like there's also an issue with the dropdown pushing the other dropdown to the bottom;

I think you could fix that by adding vertical-align: top; to your ds_select class, but I'm not so hot with CSS. So maybe somebody else will chime in.

Update used toggleClass for simplicity hat-tip Steve Sanders

edited Nov 5, 2014 at 17:34

answered Nov 5, 2014 at 17:23

CambridgeMike

4,6421 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Sanders Over a year ago

You can simplify this further by using toggleClass

Collectives™ on Stack Overflow

Multiple dropdown menus - one Jquery code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related