javascript - Jquery 调整大小问题。在宽度小于 768 宽度时单击选项启用。 768 以上鼠标悬停选项启用

Question

HTML

<div class="profile">
        <a href="#" class="hoverdropdown" onclick="return false;">Profile</a>
                    <ul class="dropdown" style="display: none;">
                      <li><a href="#">Dashboard</a></li>
                      <li><a href="#">Logout</a></li>
                    </ul>
                </div>

查询

$(document).ready(function(){
    listDropdown();
});
$(window).resize(function(){
    listDropdown();
});

function listDropdown()
{
    var windowWidth=$(window).width();
    if(windowWidth>=768)
    {
        $(".profile").each(function(){
            $(this).mouseover(function(){
                $(this).find(".dropdown").show();
            });
            $(this).find(".dropdown").mouseout(function(){
                $(this).hide();
            });         
        });
        $(document).mouseout(function(e) { 
            if(($(e.target).parents('.profile').length<=0))
            {
                $(".profile .dropdown").hide();
            }
        });
    }
    else if(windowWidth<769)
    {
        $(".profile").each(function(){
            $(this).click(function(){
                $(this).find(".dropdown").toggle();
                $(this).find(".hoverdropdown").children(".fa-plus").toggleClass("fa-minus");
            });
        });     
    }
}

在窗口宽度小于 768 时，我必须启用点击选项。在窗口宽度超过 768 时，我必须启用鼠标悬停选项。

即使是替代解决方案也很可观。

Check out the fiddle

Answer 1

尝试以下操作

    function listDropdown()
    {
        var windowWidth=$(window).width();
        if(windowWidth>=768)
        {
          $('.profile').addClass('over');
          $('.profile').removeClass('click');

        }
        else if(windowWidth<769)
        {
           $('.profile').removeClass('over');
          $('.profile').addClass('click');
        }
    }
    $("body").on('mouseover','.profile.over',function(){
        $(this).find(".dropdown").show();
     });
    $(".dropdown").mouseout(function(){
if($(this).closest('.profile').is('.over')) {
 $(this).hide();
}        
    $(document).mouseout(function(e) { 
       if(($(e.target).parents('.profile.over').length<=0))
          {
           $(".profile.over .dropdown").hide();
          }
            });
     $("body").on('click','.profile.click',function(){
                    $(this).find(".dropdown").toggle();
                    $(this).find(".hoverdropdown").children(".fa-plus").toggleClass("fa-minus");
                }); 

https://jsfiddle.net/12w7nb10/2/