Question

我正在使用以下jQuery代码：

    $('div#addMenu1').click(function(){
    if (!menuSet1){
        menuSet1 = true;
                    $('div#sliderOne').slideDown('slow');
                    $('img', this).attr('src', 'Green_Up.png');
                    $('img', this).attr('title', 'Collapse');
                    $('div#sliderOne').css("background-color", "#cee8ff");
    }
    else {
        menuSet1 = false;
                    $('div#sliderOne').slideUp('slow');
                    $('img', this).attr('src', 'Green_Down.png');
                    $('img', this).attr('title', 'Create a top menu item');
    }
});

但问题是，我想重复使用相同的代码，但也可以检查div#addMenu[1234]以及设置menuSet[1234]并更改img标题。

任何想法如何重用此代码，但基于用户点击的div部分，将部分编号，例如3和img的新标题传递给此代码，因此它将使用：

        $('div#addMenu3').click(function(){
    if (!menuSet1){
        menuSet3 = true;
                    $('div#sliderOne').slideDown('slow');
                    $('img', this).attr('src', 'Green_Up.png');
                    $('img', this).attr('title', 'Collapse');
                    $('div#sliderOne').css("background-color", "#cee8ff");
    }
    else {
        menuSet3 = false;
                    $('div#sliderOne').slideUp('slow');
                    $('img', this).attr('src', 'Green_Down.png');
                    $('img', this).attr('title', 'Create a Level 3 menu item');
    }
});

Answer 1

我不确定这是否涵盖了您的问题范围，但jQuery UI提供的accordion control涵盖了您似乎想要做的事情。

Answer 2

如果使用bind（）flavor ... http://docs.jquery.com/Events/bind

，则可以将数据传递给事件处理程序

Answer 3

你可以掀起一个小插件。可能存在问题，因为它是“空气编码”。

$.fn.dropper = function(args) {
 // some default options - extended by args
 var opts = $.extend({
   sliderElem: null,
   sliderBg: '#cee8ff',
   imgOpen: 'Green_Up.png',
   imgClosed: 'Green_Down.png',
   titleOpen: 'Collapse',
   titleClosed: 'Open',
   openClass: 'open',       
 }, args);

 this.click(function() {
   // using a "hasClass" instead of your boolean logic
   if ($(this).hasClass(opts.openClass)) {
     $(this).removeClass(opts.openClass);

     // the opts will be passed in when you call the plugin
     $(opts.sliderElem).slideUp('slow');
     $('img', this).attr('src', opts.imgClosed).attr('title', opts.titleClosed);
   } else {
     $(this).addClass(opts.openClass);

     $(opts.sliderElem).slideDown('slow').css('background-color', opts.sliderBg);         
     $('img', this).attr('src', opts.imgOpen).attr('title', opts.titleOpen);
   }
 });
 return this;
}


$('div#addMenu1').dropper({sliderElem: 'div#sliderOne'});
$('div#addMenu3').dropper({sliderElem: 'div#sliderThree', titleClosed: 'Create a Level 3 menu Item'});

通过传递参数重用jQuery ready代码

3 个答案: