Jquery Resize问题.如果宽度小于768宽度，请启用“单击选项”.768以上鼠标悬停选项启用

Jquery Resize issue. On width less than 768 width Click Option enable. Above 768 mouseover option enable

本文关键字：启用 选项 单击 单击选项 悬停 鼠标 如果 问题 Resize 宽度 小于      更新时间：2023-09-26

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的情况下，我必须启用鼠标悬停选项。

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

查看小提琴

尝试以下

    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/

这里有一个替代方法。

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')
})
相关文章：