hamed sarkhosh
5 سال پیش توسط hamed sarkhosh مطرح شد
5 پاسخ

یک نمونه Dropdown

سلام
دوستان بلاخره بعد از کلی فکر تونستم یه 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


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 5 سال پیش مطرح شد
علی فرمانی
تخصص : فرانت اند
@farmani 5 سال پیش آپدیت شد
0

@ham.sarkhosh
خیلی ساده میتونید بنویسید اگر دراپ باکس روش کلیک شد همه دراپ باکس ها هاید یا بسته بشن فقط دراپ باکس فعلی که با this مشخص میشه باز بشه .
کلن فکن نکنم 5 خطم بشه .


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
0

ساده تر هم میتونید پیاده‌سازیش کنید. مثالهای زیر رو بررسی کنید
https://materializecss.com/dropdown.html
https://semantic-ui.com/modules/dropdown.html
https://coreui.io/docs/components/dropdowns/

فقط باید مشخص کنید وقتی یکیشون کلیک شد بقیه hidden بشن.


hamed sarkhosh
تخصص : برنامه نویس
@ham.sarkhosh 5 سال پیش مطرح شد
0

@info.aligraph
الان تقریبا همین کار رو کردم دیگه. قسمت دوم کد هم مربوط به کلیک شدن خارج از dropdown هستش که همه dropdown ها بسته بشن.


hamed sarkhosh
تخصص : برنامه نویس
@ham.sarkhosh 5 سال پیش مطرح شد
0

@ali.bayat
ممنونم. ولی این لینک هایی که فرستادید همه نمونه های آماده بودند مثل bootstrap. یعنی اصلا کدزنی جاوا اسکریپت یا jquery نداشتند.
هدف من این بود که یه چیز شخصی سازی شده و بهینه برای خودم بنویسم و از این به بعد توی همه ی پروژه هام استفاده کنم با استایل دلخواه خودم. که البته همونطور که بالا نشون دادم نوشتم. فقط خواستم ببینم منطقم درست هست یا راه بهتری هم وجود داره .
با تشکر


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام