تغییر کد hide and show [بایگانی]

View Full Version : تغییر کد hide and show

prathema

سه شنبه 18 تیر 1392, 22:27 عصر

سلام

میخوام مثل بعضی سایت ها منوی کناری سایت را با قابلیت hide کردن بسازم. به این صورت که روی تایتل منوی کناری کلیک کردن باز و بسته بشه.

برای اینکار مشکلی ندارم اما مشکل اصلی اینه کدم برای تایتل اولی کار میده و تایتل منوی پایین ترش بدون عکس العمله

کد مربوطه

$(document).ready(function(){

$("#box").hide();
$("#title").show();

$('#title').click(function(){
$("#box").slideToggle();
});

});

afshin9032

چهارشنبه 19 تیر 1392, 15:19 عصر

کد کاملتر بذار

prathema

جمعه 21 تیر 1392, 14:10 عصر

اینم کد مربوط به html این دستورات هست.

<div id="title"> title bar </div>
<div id="box">

</div>

<div id="title"> title bar </div>
<div id="box">
teeeeest
</div>

Hajivandian

جمعه 21 تیر 1392, 14:15 عصر

سلام،

باید از class برای دسترسی به المنت ها استفاده کنی. دو تا المنت نمیتونن id یکسان داشته باشن.

prathema

جمعه 21 تیر 1392, 20:25 عصر

سلام

در صورتی که آیدی را به کلاس تبدیل کنم درسته که تمام گزینه ها فعال میشن اما اگر ستون اول را hide کنم تمامی ستون ها مخفی میشن. در صورتی که میخوام همون ستون مخفی بشه

نمونه کد

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide();
});
$(".show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
<button class="show">Show</button>
<p>If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
<button class="show">Show</button>
</body>
</html>

prathema

شنبه 22 تیر 1392, 16:04 عصر

لطفا پاسخ بدین

afshin9032

شنبه 22 تیر 1392, 16:52 عصر

این کد رو امتحان کن :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide1").click(function(){
$("#p1").hide();
});
$("#show1").click(function(){
$("#p1").show();
});
$("#hide2").click(function(){
$("#p2").hide();
});
$("#show2").click(function(){
$("#p2").show();
});
});
</script>
</head>
<body>
<div>
<p id="p1">If you click on the "Hide" button, I will disappear.</p>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
</div>
<hr/>
<div>
<p id="p2">If you click on the "Hide" button, I will disappear.</p>
<button id="hide2">Hide</button>
<button id="show2">Show</button>
</div>
</body>
</html>

afshin9032

شنبه 22 تیر 1392, 16:56 عصر

این هم میتونی استفاده کنی :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide1,#hide2").click(function(){
elementID=$(this).attr("element");
$("#"+elementID).hide();
});
$("#show1,#show2").click(function(){
elementID=$(this).attr("element");
$("#"+elementID).show();
});

});
</script>
</head>
<body>
<div>
<p id="p1">If you click on the "Hide" button, I will disappear.</p>
<button id="hide1" element="p1">Hide</button>
<button id="show1" element="p1">Show</button>
</div>
<hr/>
<div>
<p id="p2">If you click on the "Hide" button, I will disappear.</p>
<button id="hide2" element="p2">Hide</button>
<button id="show2" element="p2">Show</button>
</div>
</body>
</html>

azamicu

یک شنبه 23 تیر 1392, 23:54 عصر

afshin9032

دوشنبه 24 تیر 1392, 13:32 عصر

سلام دوست عزیز
بنده به شما پیشنهاد میکنم اول مفهوم انتخاب گرها رو دوباره مرور کنی
مشکل شما هم با $(this) قابل حله عزیز
و بعدش هم شما نباید رویداد کلیک رو توی ready بزاری و بهتره کلیک رو به شیئی که انتخاب کردی bind کنی به این صورت:

$(select).bind("click", function() {

});

رویداد کلیک بهتره که در ready باشه ، چون مطمئن هستید که کدهای شما بعد از باراگذاری کامل DOM اجرا میشه و در صورتی که لود صفحه stop شود ، کلید ها نیز عمل نخواهند کرد .
click یک میانبر برای bind می باشد و خود jquery هم توصیه ای برای عدم استفاده نکرده است .