如何点击手机上的下拉菜单并将鼠标悬停在桌面上

Question

我有一个在li标签上有悬停效果的菜单，它会显示正在桌面上工作的下拉列表。

桌面上没有问题。

现在我必须删除移动版本上的悬停效果，并希望在li标记上设置click事件，以便我的下拉列表将强制使用下面的li标记并正确显示。

见下面的片段：

$(document).ready(function(){
    if ($(window).width() < 768){
            $(".dropdown_list").css("display", "none");
            $(".header_menu .menu_list li").click(function(){
    		$(".dropdown_list").toggle();
			});
    }
});

#header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  transition: top 0.2s ease-in-out;
}

.header_menu .right_side ul.menu_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_menu .right_side ul.menu_list li {
  display: inline-block;
  margin: 20px;
}

.header_menu .right_side ul.menu_list li a {
  font-size: 16px;
  color: #000;
  text-transform: uppercase;
}

.header_menu .right_side ul.menu_list li a.resource_link,
.header_menu .right_side ul.menu_list li a.aboutus_link {
  padding-bottom: 20px;
}

.header_menu .right_side ul.menu_list li a:hover {
  color: #00f;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list {
  display: none;
  padding: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  background: #fff;
  z-index: 9999;
  width: 150px;
  margin-top: 10px;
}

ul.dropdown_list li {
  display: block !important;
  line-height: 22px;
  text-align: left;
  margin: 0 !important;
  position: relative;
}

ul.dropdown_list li a {
  font-size: 16px !important;
  text-decoration: none;
  display: block;
  margin: 0 !important;
  padding: 8px 10px 8px 25px;
}

ul.dropdown_list li a:hover {
  background-color: #DCB856;
  color: #fff !important;
  transition: 0.2s;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list li a {
  color: #000;
}

.header_menu .right_side ul.menu_list li:hover ul.dropdown_list {
  display: block;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
  background-color: #00f;
  color: #fff !important;
  transition: 0.2s;
}

@media all and (max-width:768px) {
  .header_menu .right_side ul.menu_list {
    margin-top: 50px !important;
  }
  .header_menu .right_side ul.menu_list {
    margin: 0;
    padding: 0;
  }
  .header_menu .right_side ul.menu_list li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #DCB856;
  }
  .header_menu .right_side ul.menu_list li a {
    display: block;
    padding: 15px;
  }
  .fixed .header_menu .right_side ul.menu_list li a {
    color: #fff !important;
  }
  .header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
    color: #000 !important
  }
  .header_menu .right_side ul.menu_list li ul.dropdown_list li a {
    color: #000 !important;
  }
  ul.dropdown_list {
    display: block;
    position: relative !important;
    box-shadow: none;
    background-color: #fff;
    width: 100% !important;
  }
}

<header id="header">
  <div class="header_menu">
    <div class="right_side float_right">
      <ul class="menu_list">
        <li><a href="home" class="home_link">Home</a></li>
        <li><a href="javascript:void(0);" class="aboutus_link">About Us</a>
          <ul class="dropdown_list about_dropdown">
            <li><a href="about1" class="">About 1</a></li>
            <li><a href="about2" class="">About 2</a></li>
            <li><a href="about3" class="">About 3</a></li>
            <li><a href="about4" class="">About 4</a></li>
          </ul>
        </li>

        <li><a href="gallery" class="gallery_link">Gallery</a></li>
        <li><a href="javascript:void(0);" class="resource_link">Resources</a>
          <ul class="dropdown_list">
            <li><a href="resources1">Resources 1</a></li>
            <li><a href="resources2">Resources 2</a></li>
            <li><a href="resources3">Resources 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我已经设法编辑你的代码，所以不使用调整大小，我已经覆盖了@media查询部分，选择ul位置static，并使display：none，并在添加类打开make display to block后，

ul.dropdown_list {
    display: none !important;
    position: absolute !important;
    box-shadow: none;
    background-color: #fff;
    width: 100% !important;
}

ul.dropdown_list.open {
    display: block !important;
    transition : all 0.5s ease;
}

之后只使用jquery代码在下拉菜单上切换打开的类，这就是全部，请参阅下面的代码段：

$(function() {
    
    $(".dropdown_list").parent("li").on("click",function(e){
      $("ul.dropdown_list").removeClass("open");
      $(this).find("ul.dropdown_list").toggleClass("open");
    });
  
});

#header {
  #position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  transition: top 0.2s ease-in-out;
}

.header_menu .right_side ul.menu_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_menu .right_side ul.menu_list li {
  display: inline-block;
  margin: 20px;
}

.header_menu .right_side ul.menu_list li a {
  font-size: 16px;
  color: #000;
  text-transform: uppercase;
}

.header_menu .right_side ul.menu_list li a.resource_link,
.header_menu .right_side ul.menu_list li a.aboutus_link {
  padding-bottom: 20px;
}

.header_menu .right_side ul.menu_list li a:hover {
  color: #00f;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list {
  display: none;
  padding: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  background: #fff;
  z-index: 9999;
  width: 150px;
  margin-top: 10px;
}

ul.dropdown_list li {
  display: block !important;
  line-height: 22px;
  text-align: left;
  margin: 0 !important;
  position: relative;
  transition:0.5s;
}

ul.dropdown_list li a {

  font-size: 16px !important;
  text-decoration: none;
  display: block;
  margin: 0 !important;
  padding: 8px 10px 8px 25px;
}

ul.dropdown_list li a:hover {
  background-color: #DCB856;
  color: #fff !important;
  transition: 0.2s;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list li a {
  color: #000;
}

.header_menu .right_side ul.menu_list li:hover ul.dropdown_list {
  display: block;
}

.header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
  background-color: #00f;
  color: #fff !important;
  transition: 0.2s;
}

@media all and (max-width:768px) {
  .header_menu .right_side ul.menu_list {
    margin-top: 50px !important;
  }
  .header_menu .right_side ul.menu_list {
    margin: 0;
    padding: 0;
  }
  .header_menu .right_side ul.menu_list li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #DCB856;
  }
  .header_menu .right_side ul.menu_list li a {
    display: block;
    padding: 15px;
  }
  .fixed .header_menu .right_side ul.menu_list li a {
    color: #fff !important;
  }
  .header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
    color: #000 !important
  }
  .header_menu .right_side ul.menu_list li ul.dropdown_list li a {
    color: #000 !important;
  }
  
  
  ul.dropdown_list {
    display: none !important;
    box-shadow: none !important;;
    position: static !important;
    margin-left : 20px !important;
    background-color: #fff;
    width: 100% !important;
    transition : all 0.5s ease;
  }
  
  ul.dropdown_list.open {
    display: block !important;
  }
  
}

<header id="header">
  <div class="header_menu">
    <div class="right_side float_right">
      <ul class="menu_list">
        <li><a href="home" class="home_link">Home</a></li>
        <li><a href="#about" class="aboutus_link">About Us</a>
          <ul id="about" class="dropdown_list about_dropdown">
            <li><a href="about1" class="">About 1</a></li>
            <li><a href="about2" class="">About 2</a></li>
            <li><a href="about3" class="">About 3</a></li>
            <li><a href="about4" class="">About 4</a></li>
          </ul>
        </li>

        <li><a href="gallery" class="gallery_link">Gallery</a></li>
        <li><a href="#ressource" class="resource_link">Resources</a>
          <ul id="ressource" class="dropdown_list">
            <li><a href="resources1">Resources 1</a></li>
            <li><a href="resources2">Resources 2</a></li>
            <li><a href="resources3">Resources 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

在移动设备上，您可以使用touchstart事件。它将触发移动触摸。

$('.dropdown_list').on('touchstart', function(e) {...

在css中，您将“@media”规则中的此元素悬停在“@media（min-width：992px）{”上。