Доброго времени суток. Вот столкнулся с такой задачей. <br/> У меня 4 DIV-a. Не выбрав первый див нельзя перейти к следующему.Все идет поочередно. <br/> Выбрав 1й див чтобы все остальные были не активными, я добавил class='enabled' если есть этот класс то выполнять определенные действия. <br/>
Проблема в том что я добавляю class для того чтобы следующая кнопка стала активной, класс добавляется только меню чего то не всплывает.!!!!!!
В чем проблема,в чем я провинился !!!!?
$(document).ready(function(){
$('.leftCol div.enabled').click(function(){
$(this).addClass('active'); //сделать кнопку активной
$("#"+$(this).attr('arrow')).show(); // Всплывавшее меню
// Если курсор вышел за пределами всплывающего дива, див закрывается
$('.choiceOfDishes').mouseleave(function(){
$('.choiceOfDishes').hide();
});
});
$('.dish').click(function(){
Cufon.replace($('.leftCol .active .text').text($(this).text()));
$("div[arrow="+$(this).parent().parent().attr('id')+"]").next().addClass('enabled');
//alert($('.dish').parent().parent().attr('id'));
$(this).parent().parent().hide();
});
});
Блоки выбора.
<div class="selectionOrder">
<table class="">
<tr>
<td class="leftCol">
<div class="enabled" arrow="firstArrow"> <div class="text">выберите основу</div></div>
<div class="" arrow="secondArrow"><div class="text"> добавьте начинку</div></div>
<div class="" arrow="thirdArrow"><div class="text"> заправьте соусом</div></div>
<div class="" arrow="fourthArrow"><div class="text"> добавки по вкусу</div></div>
</td>
Выплывающий блоки
<div class="choiceOfDishes" id="firstArrow" >
<div class="firstArrow"></div>
<div class="center">
<div class="dish">
<img class="imgDish1 "src="/i/1_1.png" />
<div>Яичная Лапша</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="bottomLine"></div>
</div>
<div class="choiceOfDishes" id ="secondArrow" >
<div class="secondArrow"></div>
<div class="center">
<div class="dish">
<img class="imgDish1 "src="/i/1_1.png" />
<div>Яичная 2</div>
</div>
<div class="dish">
<img class="imgDish2 "src="/i/1_2.png" />
<div>Яичная 22 </div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="bottomLine"></div>
</div>
<div class="choiceOfDishes" id ="thirdArrow">
<div class="thirdArrow"></div>
<div class="center">
<div class="dish">
<img class="imgDish1 "src="/i/1_1.png" />
<div>Яичная 3</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="bottomLine"></div>
</div>
<div class="choiceOfDishes" id ="fourthArrow">
<div class="fourthArrow"></div>
<div class="center">
<div class="dish">
<img class="imgDish1 "src="/i/1_1.png" />
<div>Яичная 4</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="bottomLine"></div>
</div>
</div>