0

用户单击下拉列表上的菜单选项后，我希望顶部标签具有原始菜单标题，后跟冒号，然后是他们刚刚单击的选项。

我正在使用这个演示中的代码，它很好地实现了这个效果：http: //tympanus.net/Tutorials/CustomDropDownListStyling/

但是，我想用几个下拉菜单来做到这一点，并试图自定义演示的代码来做到这一点。这是我尝试过的：

HTML：

<section id="options" class="clearfix combo-filters">

    <div class="option-combo size">                     
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span data-key="Size: ">Size</span>
      <ul class="dropdown option-set clearfix " data-filter-group="size"> 
        <li><a href="#filter-size-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-size-tiny" data-filter-value=".tiny">Tiny</a>

          <li><a href="#filter-size-small" data-filter-value=".small">Small</a>

          <li><a href="#filter-size-medium1" data-filter-value=".medium1">Medium</a>

          <li><a href="#filter-size-large" data-filter-value=".large">Large</a>

          <li><a href="#filter-size-giant" data-filter-value=".giant">Giant</a>

      </ul>
      </div>
    </div>


    <div class="option-combo hair">
              <div id="ee" class="wrapper-dropdown-3" tabindex="2">

      <span data-key="Hair:">Hair</span>
            <ul class="dropdown option-set clearfix " data-filter-group="hair"> 
        <li><a href="#filter-hair-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-hair-short" data-filter-value=".short">Short</a>

          <li><a href="#filter-hair-medium2" data-filter-value=".medium2">Medium</a>

          <li><a href="#filter-hair-long" data-filter-value=".long">Long</a>


      </ul>
      </div>
    </div>


    <div class="option-combo trainability">
              <div id="ff" class="wrapper-dropdown-3" tabindex="3">

      <span>Trainability</span>
      <ul class="dropdown option-set clearfix " data-filter-group="trainability"> 
        <li><a href="#filter-shape-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-trainability-easy" data-filter-value=".easy">Easy</a>

          <li><a href="#filter-trainability-average" data-filter-value=".average">Average</a>

          <li><a href="#filter-trainability-difficult" data-filter-value=".difficult">Difficult</a>

          <li><a href="#filter-trainability-vdifficult" data-filter-value=".vdifficult">Very Difficult</a>

      </ul>
      </div>
    </div>

jQuery：

 jQuery(document).ready(function(){

/*   my code */

     var group="";

     if ($(this).find('span').data('key')==="size") {
         group="Size: ";
     }else if ($(this).find('span').data('key')==="hair")   {
      group="Hair: ";
      }

/* my code end */

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents: function () {

            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    },
    jQuery(function () {
        var dd = new DropDown(jQuery('#dd'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ee'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ff'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

});

这是一个为这个 jsfiddle 组合在一起的 JsFiddle

4

1 回答 1

0

The problem is you are using a closure variable to hold the group. Since each dropdown has its on key value, the group is an instance value(not a shared value - so you should not use closure here).

In the below solution the group is added as an instance property of DropDown and it is used later during the selection

Try this

jQuery(function(){

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
        this.group = this.placeholder.data('key');
        this.group = this.group.charAt(0).toUpperCase() + this.group.substring(1) + ':';
    }
    DropDown.prototype = {
        initEvents: function () {
            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    };

    new DropDown(jQuery('#dd'));
    new DropDown(jQuery('#ff'));
    new DropDown(jQuery('#ee'));

    jQuery(document).click(function () {
        // all dropdowns
        jQuery('.wrapper-dropdown-3').removeClass('active');
    });
});

Demo: Fiddle

于 2013-07-04T02:59:57.880 回答