尝试添加 slideToggle() 函数但它不起作用

Question

我有一个自定义样式的选择选项代码，用于选择年份和月份。我想给它添加 jquery slideToggle() 效果。我正在尝试选择自定义定义的类，但它不起作用。以下是我的代码：

/*

Reference: http://jsfiddle.net/BB3JK/47/

*/

$('select').each(function(){

    var $this = $(this), numberOfOptions = $(this).children('option').length;

  

    $this.addClass('select-hidden'); 

    $this.wrap('<div class="select"></div>');

    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');

    $styledSelect.text($this.children('option').eq(0).text());

  

    var $list = $('<ul />', {

        'class': 'select-options'

    }).insertAfter($styledSelect);

  

    for (var i = 0; i < numberOfOptions; i++) {

        $('<li />', {

            text: $this.children('option').eq(i).text(),

            rel: $this.children('option').eq(i).val()

        }).appendTo($list);

    }

  

    var $listItems = $list.children('li');

  

    $styledSelect.click(function(e) {

        e.stopPropagation();

        $('div.select-styled.active').not(this).each(function(){

            $(this).removeClass('active').next('ul.select-options').hide();

        });

        $(this).toggleClass('active').next('ul.select-options').toggle();

    });

  

    $listItems.click(function(e) {

        e.stopPropagation();

        $styledSelect.text($(this).text()).removeClass('active');

        $this.val($(this).attr('rel'));

        $list.hide();

        //console.log($this.val());

    });

  

    $(document).click(function() {

        $styledSelect.removeClass('active');

        $list.hide();

    });

});

//select dropdown slide function

$(document).ready(function(){

  $(".select-styled").click(function(){

    $(".select-options").slideToggle("slow");

  });

});

在添加了 slideToggle() 脚本之后，它以某种方式同时滑动了两个选择菜单，并且以非常丑陋的方式（正如您可以在附加的代码段中体验到的那样）。请帮助我使 slideToggle() 效果完美。