javascript - 如何在移动设备上单击下拉菜单并在桌面上悬停

我有一个在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>

最佳答案

我已经设法编辑了您的代码，因此无需使用调整大小，
我已经通过设置ul位置static并设置display：none来覆盖@media查询部分，并在将class open make display添加到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>

关于javascript - 如何在移动设备上单击下拉菜单并在桌面上悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52179984/