(مهم) مشکل در طراحی قالب با بوت استرپ

[hamidsh91]

سلام، اگر هدفتون فقط نمایش زیرمنو هست و افکت خاصی مد نظر ندارید، بهتره به جای جاوااسکریپت از سی اس اس استفاده کنید:

@media screen and (min-width: 981px){
    li:hover ul {display: block}
} 

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

اما اگر به هر دلیلی تمایل به استفاده از جاوااسکریپت دارید، می تونید اول عرض صفحه رو بدست بیارید و بعد شرط بگذارید که اگر عرض صفحه از فلان اندازه بیشتر بود، این کار (نمایش زیر منو با هاور) انجام بشه:

$(document).ready(function(){
    var screenWidth = $(window).width();
    if(screenWidth > 980){
        $('ul.nav li.dropdown').hover(function(){
            $('ul.dropdown-menu',this).fadeIn();
        } ,
        function(){
            $('ul.dropdown-menu',this).fadeOut();
        });    
    }
}); 

البته ممکنه خود بوت استرپ تابع یا کلاس پیش فرضی برای این کار داشته باشه، من بوت استرپ کار نکردم.

سلام . در تکمیل فرمایش دوستمون برای بوت استرپ و از طریق css باید این کد رو اضافه کنید :

@media (min-width:997px) {

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }

}