嗨，我已经调整了本教程滑块（http://tympanus.net/codrops/2011/03/16/expanding-image-menu/）以响应且不使用图像背景。我需要能够根据是否展开来调整列表项的不透明度，但我正在努力寻找一种将活动类添加到展开项的方法。我想我应该通过使用 .addClass 来做到这一点，但我不知道在哪里做这个以及应该如何写。非常感谢任何指导。谢谢查理
$(function() {
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = 8,
/*
@anim
if we want the default opened item to animate initialy set this to true
*/
anim = true,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '60%'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/*
.find('.ei_descr')
.css({display:'block'});/
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '60%'} : {width : '5%'},
imageParam = (dir) ? {left : '0px'} : {left : '5%'};
/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});