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

时间：2018-09-05 07:56:34

标签： javascript jquery html css drop-down-menu

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

2 个答案:

答案 0 :(得分：1)

我设法编辑了您的代码，因此无需使用resize， 我通过设置ul位置static和make display来覆盖@media查询部分，并使display：none，并在添加类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>

答案 1 :(得分：0)

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

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

在CSS中，您将鼠标悬停在“ @media”规则中的此元素上为“ @media（最小宽度：992px）{”。

相关问题
最新问题