我有一个自定义样式的选择选项代码,用于选择年份和月份。我想给它添加 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() 效果完美。
添加回答
举报
0/150
提交
取消
