Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 9
$(document).ready(function(){
var first=0;
$(«a.menu»).click(
function(){
if(first!=0)
{
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);
}
}
);
})
Так, во втором случае, должно в нужном порядке скрываться/появляться (т.е. не одновременно).
var first=0;
$(«a.menu»).click(
function(){
if(first!=0)
{
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);
}
}
);
})
Так, во втором случае, должно в нужном порядке скрываться/появляться (т.е. не одновременно).
так короче код:
$(«a.menu»).click(
function(){
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
});
Поидее всё должно работать.
$(«a.menu»).click(
function(){
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
});
Поидее всё должно работать.
Так не совсем верно работает. Поскольку блоков класса «magic» несколько, при выполнении hide, идет пробег по всем, и в this.id будет записываться id текущего, а не id ссылки, по которой кликнули.
Поэтому я решил hide применять только к уже открытому блоку, для чего ввел еще одну переменную last_id, а потом в show использую не this.id, а переменную now_id, куда предварительно записываю id ссылки, по которой кликнули.
Вобщем, вот что получилось:
$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;
$(«a.menu»).click(
function(){
id_now=this.id;
if(first!=0)
{
$(«div#magic»+ last_id).hide(500,function(){
$(«div#magic»+ id_now).show(500);
});
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);
}
last_id=id_now;
}
);
})
Спасибо большое, совместными усилиями мы эту проблему решили. Сейчас в самом топике исправлю.
Поэтому я решил hide применять только к уже открытому блоку, для чего ввел еще одну переменную last_id, а потом в show использую не this.id, а переменную now_id, куда предварительно записываю id ссылки, по которой кликнули.
Вобщем, вот что получилось:
$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;
$(«a.menu»).click(
function(){
id_now=this.id;
if(first!=0)
{
$(«div#magic»+ last_id).hide(500,function(){
$(«div#magic»+ id_now).show(500);
});
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);
}
last_id=id_now;
}
);
})
Спасибо большое, совместными усилиями мы эту проблему решили. Сейчас в самом топике исправлю.
Вот, накидал такое меню, может пригодится:
Посмотреть вживую
<html>
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main li").click(function(){
thisLi = this;
if($(".main ul:not(:hidden)").length>0){
$(".main ul:not(:hidden)").hide('slow', function(){
$(thisLi).children('ul').show('slow');
});
} else {
$(thisLi).children('ul').show('slow');
}
});
})
</script>
<style type="text/css">
.main ul {display:none}
</style>
</head>
<body>
<ul class='main'>
<li> Меню1
<ul>
<li>Меню1.1</li>
<li>Меню1.2</li>
<li>Меню1.3</li>
</ul>
</li>
<li> Меню2
<ul>
<li>Меню2.1</li>
<li>Меню2.2</li>
<li>Меню2.3</li>
</ul>
</li>
<li> Меню3
<ul>
<li>Меню2.1</li>
<li>Меню2.2</li>
<li>Меню2.3</li>
</ul>
</li>
</ul>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Посмотреть вживую
for(i=1;i<=$(«div.magic»).length;i++) жесть
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Имитируем height:auto при использовании animate()