jQuery插件——下拉选择框

;(function () {
    $.fn.extend({
      dropdown:function (options) {
        return this.each(function (i, val) {
          $(val).css("position", "relative");
          // 设置默认参数
          var opts = $.extend({
            color: "#28c4ff",
            items: [
              {key1: "选项一"},
              {key2: "选项二"},
              {key3: "选项三"},
              {key4: "选项四"},
              {key5: "选项五"}
            ],
            callback: function () {
              
            }
          }, options);

          // 创建默认选择--请选择
          var $defaultVal = $("<p class=‘item‘></p>").html("请选择").appendTo($(this));

          // 创建选择项
          var $items = $("<ul class=‘menu-options‘></ul>").css("backgroundColor", $(document.body).css("backgroundColor"));
          $(this).append($items);
          // 为每一个选择项添加属性 如果是对象类型，则添加key作为属性，如果就是字符串的话，直接既当做属性，也当做内容添加
          $.each(opts.items, function (index, item) {
            if (typeof item == "string") {
              $("<li></li>").html(item).attr("data-val", item).appendTo($items);
            } else if (typeof item == "object") {
              for (var key in item) {
                $("<li></li>").html(item[key]).attr("data-val", key).appendTo($items);
              }
            }
          });

          $defaultVal.on("click", function (ev) {
            ev.stopPropagation();
            $(this).toggleClass("open");
            $(this).hasClass("open") ? $(this).next().slideDown() : $(this).next().slideUp()
          });

          // 选择项的点击事件
          $items.on("click", "li", function (ev) {
            ev.stopPropagation();
            var $this = $(this);
            console.log($this.attr("data-val"))
            $(this).addClass("active").css("backgroundColor", opts.color).siblings().removeClass("active").css("backgroundColor",$this.parent().css("backgroundColor"));
            opts.callback();
            $this.parent().slideUp(function () {
              $this.parent().prev("p").html($this.html()).attr("data-val", $this.attr("data-val")).removeClass("open");
            });
            
          });
          // 点击空白部分，关闭下拉选择框
          $(window).on("click", function () {
            if ($defaultVal.hasClass("open")) {
              $defaultVal.trigger("click");
            }
          })
        });
      }
    })
})(jQuery);

<div class="dropdown"></div>

    $(".dropdown").dropdown({
        color: "#f0f",
        items: [
          {"shucai": "青菜"},
          {"shuiguo": "葡萄"},
          {"food": "面包"}
        ],
        callback: function () {
          console.log($(this))
        }.bind($(".dropdown"))
      });