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>

的Jquery

$(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/

Answer 2

这是另一种方法。

<强> HTML

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

<强> CSS

.dropdown{
  display: none;
}

.hoverdropdown:hover + ul{
  display: block;
}

// If you are using jQuery Snippet
@media (max-width:767px){
  .open .dropdown{
    display: block;
  }
}

<强>的jQuery

$('.hoverdropdown').click(function(){
  $(this).parent().toggleClass('open')
})