کمک در مورد نشان دادن یک دیو پس از کلیک کردن

[sun2rise]

من میخوام یه منوی باز شو درست کنم ولی به مشکل بر میخورم از دوستانی که در زمینه جی کوئری تخصص دارن لطفا کمکم کنند
فرض کنید که من پنج تا دیو با نام های یکسان Div1 دارم که هر کدام از این دایوها زیرمنو می باشد
من که روی منوها این کار رو انجام میدم هر پنج Div1 به طور همزمان نشون داده میشن که این به درد نمیخوره
وقتی که میخوام روی یک منو کلیک کنم فقط دیو داخل این منو مشاهده بشه و دیو های بقیه مخفی بمونه

لطفا کمکم کنید منتظرم

[Javidhb]

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

[sun2rise]

این کد سی اس اس




.MHMenu {
height:26px;
overflow:hidden;
border:1px solid red;
float:right;
width:70px;


}

.MHMMenu {
background-color:#313131;
border-radius:5px 5px 0px 0px;
display:inline;
color:white;
padding:0px 5px;
transition:all 0.3s ease 0.1s;
width:auto;

}
.MHMMenu:hover {
background-color:#00B7CB;
}
.Header .MenuHead .MHMenu .MHMSMenu {
background-color:#313131;
height:0px;
color:white;
padding:0px 6px;
width:150px;
float:right;
clear:both;
padding-bottom:10px;
position:absolute;
display:none;


}
MHMSMenu ul li.{
border-bottom:1px dashed #fff;
}



اینم از کد اچ تی ام ال




<div class="MHMenu">
<div class="MHMMenu">موضوعات</div>
<div class="clear"></div>
<div class="MHMSMenu">
<ul>
<li>موضوع شماره یک</li>
<li>موضوع شماره دو</li>

</ul>
</div>
</div>


اینم از جیکوئری




<script>
$(document).ready(function () {
$('.MHMenu').mouseover(function () {
$(this).css("height", 'auto');
alert($(this).selector.length);
$('.MHMSMenu').css("height", 'auto');
$('.MHMSMenu').css("display", 'normal').show();

});
$('.MHMenu').mouseout(function () {
$(this).css("height", '26px');
$('.MHMSMenu').css("height", '0px');
$('.MHMSMenu').css("display", 'none').hide();
});
});
</script>




فرض کنید که من میخوام منوهای زیادی با زیرمنوها ایجاد کنم
میخوام که روی هر منویی که کلیک یا موس آور میکنم زیر منوی مربوط به اون منو برام ظاهر بشه
برای مثال
اگه دقت کرده باشید تو کدهای اچ تی ام ال زیرمنوها در یک دیو به نام MHMSMenu قرار دارن این زیرمنوها قراره چندتا بشه وقتی که من روی MHMenu میخوام برم فقط دیو MHMSMenu مربوط به این منو برام ظاهر بشه و بقیه دیوهای MHMSMenu ظاهر نشن
لطفا مرا راهنمایی کنید
چون خیلی وقته دنبال این راه حل هستم و پیدا نمیکنم
با تشکر

[sun2rise]

یعنی کسی نیست به من کمک کنه ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

[viiictor]

یا نام دایو ها رو متغیر استفاده کنید یا برای هر کدوم یک کلاس در نظر بگیرید

[sun2rise]

یا نام دایو ها رو متغیر استفاده کنید یا برای هر کدوم یک کلاس در نظر بگیرید
این روشی که شما گفتید در حالی استفاده میشه که ما تعداد منو ها رو بدونیم ولی وقتی که قراره تعداد منوها متغیر باشن اونوقت نمیتونیم دستی اسم دایو ها رو عوض کنیم (این کار حرفه ای نیست)

[mahdiyaran]

از پلاگین های اماده (چرخ های اختراع شده) جهت ساخت منو استفاده کنید یا طبق الگوی زیر بنویسید :

الگوی کلی رو مینویسم و خودت بسطش بده :


<nav id="mainnav">
<ul>
<li>
<a href="#">عمومی</a>
</li>
<li>
<a href="#">سایر بخشها</a>
<ul>
<li><a href="#">سایر طراح ها</a></li>
<li><a href="#">کسب درامد</a></li>
</ul>
</li>
</ul>
</nav>

#mainnav {width:100%;height:50px;background:#000;position:r elative;}
#mainnav > ul {position:relative;}
#mainnav > ul > li {float:right;padding:5px;}
#mainnav > ul > li ul {position:absolute;/* background,... */display:none;}
#mainnav > ul > li:hover > ul {display:block;}
#mainnav > ul > li a {/* link style */}

[sun2rise]

از پلاگین های اماده (چرخ های اختراع شده) جهت ساخت منو استفاده کنید یا طبق الگوی زیر بنویسید :

الگوی کلی رو مینویسم و خودت بسطش بده :


<nav id="mainnav">
<ul>
<li>
<a href="#">عمومی</a>
</li>
<li>
<a href="#">سایر بخشها</a>
<ul>
<li><a href="#">سایر طراح ها</a></li>
<li><a href="#">کسب درامد</a></li>
</ul>
</li>
</ul>
</nav>

#mainnav {width:100%;height:50px;background:#000;position:r elative;}
#mainnav > ul {position:relative;}
#mainnav > ul > li {float:right;padding:5px;}
#mainnav > ul > li ul {position:absolute;/* background,... */display:none;}
#mainnav > ul > li:hover > ul {display:block;}
#mainnav > ul > li a {/* link style */}





گفتید از پلاگین آماده استفاده کنید ولی من اسم پلاگین مربوطه رو نمیدونم میشه راهنمایی کنید که این پلاگین اسمش چیه

[Javidhb]

اگه درست منظورتون رو فهمیده باشم....

قسمت jQuery تون به این شکل باید تغییر کنه:

$(document).ready(function () {
$('.MHMenu').mouseover(function () {
$(this).css("height", 'auto');
$(this).children('.MHMSMenu').css('height', 'auto').show();

});
$('.MHMenu').mouseout(function () {
$(this).css("height", '26px');
$(this).children('.MHMSMenu').css("height", '0px').hide();
});
});

دمــو (http://jsfiddle.net/DWzDq/)

اینجوری بهش میگید که توی المنتهای زیرمجموعه عملیات مد نظرتون رو انجام بده نه هر divی که کلاس مورد نظر رو داشت.

[mahdiyaran]

گفتید از پلاگین آماده استفاده کنید ولی من اسم پلاگین مربوطه رو نمیدونم میشه راهنمایی کنید که این پلاگین اسمش چیه

دوست عزیز پلاگینهای زیادی هستن باید ببینید کدوم مناسبه شماست و استفاده کنید :


http://jquery-plugins.net/tag/dropdown-menu
http://www.sanwebe.com/2013/06/multi-level-dropdown-menu-css
http://www.jqueryscript.net/tags.php?/Drop+Down+Menu/

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/
http://css-tricks.com/simple-jquery-dropdowns/
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/


من هر موقع بخوام از پلاگین استفاده کنم حداقل چندتاش رو تست میکنم.

[sun2rise]

اگه درست منظورتون رو فهمیده باشم.... قسمت jQuery تون به این شکل باید تغییر کنه: $(document).ready(function () { $('.MHMenu').mouseover(function () { $(this).css("height", 'auto'); $(this).children('.MHMSMenu').css('height', 'auto').show(); }); $('.MHMenu').mouseout(function () { $(this).css("height", '26px'); $(this).children('.MHMSMenu').css("height", '0px').hide(); }); }); دمــو (http://jsfiddle.net/DWzDq/) اینجوری بهش میگید که توی المنتهای زیرمجموعه عملیات مد نظرتون رو انجام بده نه هر divی که کلاس مورد نظر رو داشت. یک دنیا ممنون به خاطر این راهنمایی شما نمیدونید از کی دارم دنبال این خاصیت میگردم باز هم تشکر