PDA

View Full Version : مشکل با toggle


NIMA_1981
یک شنبه 04 فروردین 1392, 21:31 عصر
سلام دوستان من چند تا دکمه دارم که وقتی روی هر کدومش کلیک میکنم بقیه منو ها یم مقدار جلو تر میرن که جا برای زیر شاخه های این منو باز بشه
101842
حالا روی هر کدام که کلیک کنم باز میشه و زیر مجموعه هار رو نشون میده
101843
حالا مسکل اینه که باید در هر لحظه فقط آهرین منو باز باشه و قبلی بسته بشه مثل این عکس زیر بشه
101844
من با toggle نوشتم اما فقط وقتی روی خود منوی که باز کلسک کنی بسته میشه

میشه راهنمایی بفرمایید
plague
یک شنبه 04 فروردین 1392, 23:12 عصر
با toggle ننویس
مثلا منو های اصلی کلاس menu بده و زیر مجموعه هاشون کلاس submenu
وقتی روی منو کلیک شد بگو همه سابمنو ها بجز سابمنو اون منوی کلیک شده بسته بشن و این سابمنوی کذایی باز بشه
NIMA_1981
دوشنبه 05 فروردین 1392, 00:00 صبح
خوب این اون چیزیه که بلد نیستم - میشه یک مثال بنویسید لطفا
plague
دوشنبه 05 فروردین 1392, 16:05 عصر
به منو هات اون کلاسی که گفتم رو بده بعد کدت رو بزار اینجا (html,jquery) , همش نه فقط اون قسمت منو رو
NIMA_1981
دوشنبه 05 فروردین 1392, 17:04 عصر
بفرما دوست من

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test menu</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">></script>
<style type="text/css">
.sizem
{
width:30px;
height:30px;
position:absolute;
}
#menu1{ background-color:Red; margin-left:20px;}
#menu2{ background-color:Red;margin-left: 60px;}
#menu3{ background-color:Red;margin-left: 100px;}
#menu4{ background-color:Red;margin-left: 140px;}

</style>
<script type='text/javascript'>
$(document).ready(function () {
$("#menu1").toggle(function () { $("#menu2,#menu3,#menu4").stop().animate({ "margin-left": "+=100px" }, "slow"); }, function () { $("#menu2,#menu3,#menu4").stop().animate({ "margin-left": "-=100px" }, "slow"); });
$("#menu2").toggle(function () { $("#menu3,#menu4").stop().animate({ "margin-left": "+=100px" }, "slow"); }, function () { $("#menu3,#menu4").stop().animate({ "margin-left": "-=100px" }, "slow"); });
$("#menu3").toggle(function () { $("#menu4").stop().animate({ "margin-left": "+=100px" }, "slow"); }, function () { $("#menu4").stop().animate({ "margin-left": "-=100px" }, "slow"); });

});
</script>
</head>
<body>
<div id="menu1" class="sizem "></div><div id="menu2" class="sizem "></div>
<div id="menu3" class="sizem "></div><div id="menu4" class="sizem "></div>
</body>
</html>
plague
سه شنبه 06 فروردین 1392, 00:11 صبح
ای بابا من نمیدونستم اینمیشن استفاده کردی این خیلی مصیبت داره همش باید توجه داشته باشی که اکشن ها رو به هم زنجیر کنی تا درست اجرا بشن
اینو تست کن



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
.menu
{
width:30px;
height:30px;
position:absolute;
background-color:Red;
}
#menu1{ margin-left:20px;}
#menu2{ margin-left: 60px;}
#menu3{ margin-left: 100px;}
#menu4{ margin-left: 140px;}
</style>
<script type='text/javascript'>

$(document).ready(function () {
$(".menu").click(function(){
var obj = $(this);
if($(this).hasClass('openmenu'))
{
obj.removeClass('openmenu').css('background-color' , 'red');
$('.open').removeClass('open').stop().animate({ "margin-left": "-=100px" }, "slow");
}
else
{
if($('.openmenu').length > 0 )
{
$('.open').removeClass('open').stop().animate({ "margin-left": "-=100px" }, "slow" , function(){
$('.openmenu').css('background-color' , 'red').removeClass('openmenu');
obj.nextAll('div.menu').addClass('open').stop().an imate({ "margin-left": "+=100px" }, "slow" , function(){
obj.addClass('openmenu');
});


});

}
else
{
obj.addClass('openmenu').nextAll('div.menu').addCl ass('open').stop().animate({ "margin-left": "+=100px" }, "slow");
}
}
})

});
</script>
</head>
<body>
<div id="menu1" class="menu"></div><div id="menu2" class="menu"></div>
<div id="menu3" class="menu"></div><div id="menu4" class="menu"></div>
</body>
</html>
NIMA_1981
سه شنبه 06 فروردین 1392, 08:19 صبح
سلام دوست من دستت درد نکنه - فقط یه چیز دیگه اندهزه هر کدوم از اینها فزق داره مثلا منوی 1 100 یکسل باز میشه - منوی دوم 300 پیکسل اینو چیکار باید بکنم
دستت درد نکنه