PDA

View Full Version : سوال: مشکل در حالت toggle برای بیش از یک حالت انتخاب


پیام حیاتی
یک شنبه 12 بهمن 1393, 17:35 عصر
سلام
این قطعه کد رو ببینید :
$("button").click(function(){
$("p").toggle(500);
});



با هر بار کلیک بر روی دکمه پاراگراف مورد نظر باز و بسته میشه ، مشکل اینجاست اگر بیش از یک دکمه به کار ببریم با کلیک بر روی یکی از آنها تمامیه پاراگراف ها باز یا بسته خواهند شد.
به چه شکل می تونم این مشکل رو حل کنم؟
تشکر
2undercover
یک شنبه 12 بهمن 1393, 18:00 عصر
خوب می خواهید با کلیک روی یک دکمه کدوم پاراگراف ها وضعیتشون تغییر بکنه؟ (مثلا اولین پاراگراف یا پاراگرافی که شماره اش با دکمه یکی هست؟!)
پیام حیاتی
یک شنبه 12 بهمن 1393, 18:26 عصر
چند کلاس در یک page دارم مثلا" bingo1,bingo2,bingo3 ، در هر کدام از این کلاس ها مطالب تقریبا" زیادی قرار داره می خوام برای هر کدام از این کلاس ها یک دکمه قرار بدم به عنوان ادامه متن یا بیشتر که وقتی روش کلیک کرد تمامیه محتوا نمایش داده بشه.
mojtabamalaekeh
یک شنبه 12 بهمن 1393, 20:39 عصر
انتخابگرهای jQuery هم مثل انتخابگرهای css هستن. کدی که گذاشتی همه ی پاراگراف ها رو toggle میکنه.
برای toggle کردن یک کلاس خاص یا یک id خاص عین css از . و # میتونی استفاده کنی.

$("#MyId").toggle(500);

$(".MyClassName").toggle(500);

$("div > .MyClassName").toggle(500);
پیام حیاتی
یک شنبه 12 بهمن 1393, 20:51 عصر
درسته ، اما بدین شکل زمانی که کلاس یا آی دی hide شد دیگه حالت انتخابی برای کلیک و نمایش حالت بعدی toggle که show هست وجود نداره.
mojtabamalaekeh
یک شنبه 12 بهمن 1393, 22:04 عصر
متوجه منظورت نشدم اما میدونم با hide شدن کار خراب نمیشه.
این نمونه رو ببین توی مرورگر:

<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">

<script src="jquery.min.js"></script>

<title>Toggle Test</title>

<style>
.x { display: none}
</style>
</head>
<body>
<p>Article 1<b r>Line 1</p>
<p id="p1" class="x">Line 2</p>
<a href="javascript: void(0)" onclick="MyToggle(this, 'p1')">Expand</a>
<b r>
<p>Article 2<b r>Line 1</p>
<p id="p2" class="x">Line 2</p>
<a href="javascript: void(0)" onclick="MyToggle(this, 'p2')">Expand</a>
<b r>
<p>Article 3<b r>Line 1</p>
<p id="p3" class="x">Line 2</p>
<a href="javascript: void(0)" onclick="MyToggle(this, 'p3')">Expand</a>
</body>
<script>
function MyToggle(button, pId)
{
var p = $("#" + pId);
var disp = $(p).css("display");
button.innerHTML = disp == "block" ? "Expand" : "Collapse";
p.toggle(300);
}
</script>
</html>
تگ های br رو بخاطر فروم b r نوشتم.
پیام حیاتی
دوشنبه 13 بهمن 1393, 12:59 عصر
ممنون ولی من چیزی از این کد برای استفاده در پروژه خودم دستگیرم نسد.
مطالب رو فراموش کردم میرم دوباره می خونم... .