سلام
دوستان بلاخره بعد از کلی فکر تونستم یه dropdown بنویسم که عملکرد درستی داشته باشه. این dropdown قراره چندین بار در یک صفحه استفاده بشه و نباید هیچ وقت دو تا dropdown با هم دیگه باز باشن و وقتی یکیشون باز می شه دیگری باید بسته بشه. این از قسمت html
<div class="js-dropdown">
<button class="dropdown-button">کلیک</button>
<ul class="dropdown-content" >
<li class="dropdown-content-item">111</li>
<li class="dropdown-content-item">222</li>
<li class="dropdown-content-item">333</li>
</ul>
</div>
این بخش از کد برای باز و بسته شدن dropdown هست وقتی که روش کلیک می کنیم و همینطور وقتی روی dropdown دیگه ای کلیک می کنیم بقیه dropdown ها بسته شوند
$(document).ready(function(){
$(".dropdown-button").on('click',function (e) {
var dropdown = $(this).closest(".js-dropdown");
if(dropdown.find('.dropdown-content').hasClass('is-visible')){
$('.dropdown-content').removeClass('is-visible');
}else{
$('.dropdown-content').removeClass('is-visible');
dropdown.find('.dropdown-content').addClass('is-visible');
}
})
});
این بخش هم برای وقتی که روی هرجای صفحه به جز dropdown ها کلیک می کنیم اگه dropdown ی باز بود بسته بشه.
window.onclick = function(event) {
if (!event.target.matches('.dropdown-button')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('is-visible')) {
openDropdown.classList.remove('is-visible');
}
}
}
}
به نظرتون منطق کد نویسیم درسته ؟ خودم احساس می کنم خیلی شلختس و روش های بهینه تر و بهتری براش هست. شما چی فکر می کنید؟
@Alimotreb
@ali.bayat
درود...
پیوندهای زیر:
https://codepen.io/dustindowell/pen/YPOeed
https://codepen.io/nagasai/pen/dXMGQX
https://codepen.io/LesterMacDonald/pen/pdppvV
بدون جاوا اسکریپت:
https://codepen.io/nyekrip/pen/pJoYgb
@ham.sarkhosh
خیلی ساده میتونید بنویسید اگر دراپ باکس روش کلیک شد همه دراپ باکس ها هاید یا بسته بشن فقط دراپ باکس فعلی که با this مشخص میشه باز بشه .
کلن فکن نکنم 5 خطم بشه .
ساده تر هم میتونید پیادهسازیش کنید. مثالهای زیر رو بررسی کنید
https://materializecss.com/dropdown.html
https://semantic-ui.com/modules/dropdown.html
https://coreui.io/docs/components/dropdowns/
فقط باید مشخص کنید وقتی یکیشون کلیک شد بقیه hidden بشن.
@info.aligraph
الان تقریبا همین کار رو کردم دیگه. قسمت دوم کد هم مربوط به کلیک شدن خارج از dropdown هستش که همه dropdown ها بسته بشن.
@ali.bayat
ممنونم. ولی این لینک هایی که فرستادید همه نمونه های آماده بودند مثل bootstrap. یعنی اصلا کدزنی جاوا اسکریپت یا jquery نداشتند.
هدف من این بود که یه چیز شخصی سازی شده و بهینه برای خودم بنویسم و از این به بعد توی همه ی پروژه هام استفاده کنم با استایل دلخواه خودم. که البته همونطور که بالا نشون دادم نوشتم. فقط خواستم ببینم منطقم درست هست یا راه بهتری هم وجود داره .
با تشکر
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟