jquery css悬停菜单，关闭下拉菜单时，相同的元素再次触摸iPad上

vmjh9lq9 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(104)

导航栏包含以下类别：

politics, economy, education

字符串
当您点击这些类别时，会打开一个下拉列表，其中包含以下位置：

asia, europe, North America

型
所以我想要的是：
如果用户单击（标签），（或悬停在桌面上），例如在类别上：Politics，下拉菜单会正常打开，但如果用户单击（选项卡）同一类别名称（Politics），则下拉菜单会关闭。
这可能吗？
这是我的HTML

#menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: center;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}

.categories {
  position: relative;
  display: inline-block;
  background-color: inherit;
  width: auto;
  height: auto;
  text-align: center;
  padding: 0px 15px 0px 15px;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
}

.categories:hover {
  color: #e5633f;
}

.categories .touch {
  position: relative;
  display: inline-block;
  width: auto;
  height: 42px;
  line-height: 42px;
}

.categories .touch:hover {
  color: #e5633f;
}

.categories .touch:before {
  content: "▪ ";
}

.locations {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
}

.locations a {
  display: block;
  font-size: 15px;
  padding: 0 40px 0 40px;
  text-transform: capitalize;
  height: 36px;
  line-height: 36px;
  border-left: 1px solid #121212;
  border-right: 1px solid #121212;
  border-bottom: 1px solid #121212;
}

.locations a:hover {
  color: #ffffff;
  background-color: #121212;
}

.categories:hover .locations {
  display: block;
  animation: santiaborg 555ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes santiaborg {
  0% {
    transform: scaleY(0) translateX(-50%);
  }
  80% {
    transform: scaleY(1.1) translateX(-50%);
  }
  100% {
    transform: scaleY(1) translateX(-50%);
  }
}

<div id="menu" class="active">
  <div class="categories" tabindex="1">
    <div class="touch">News</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="2">
    <div class="touch">Politics</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="3">
    <div class="touch">Economy</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>
</div>

的字符串

jquery

来源：https://stackoverflow.com/questions/76639019/css-hover-menu-close-dropdown-when-same-element-is-touched-again-on-ipads

1条答案

按热度按时间

bksxznpy1#

只是添加了一个CSS类hide-item来切换下拉菜单的打开和关闭，并编写了一些JavaScript代码来处理单击事件。如果你有任何关于JS代码的问题，你可以问。
我还用你的代码更新了CSS，这样CSS类hide-item将只存在于不可悬停的设备中。
同样的方式，我也为JS代码添加了条件渲染，这样这些代码就只能在不可悬停的设备上执行。

// Conditionally rendering only for non-hoverable devices
if(window.matchMedia("(hover: none)").matches){
  var categories = document.querySelectorAll('.categories');
  var locations = document.querySelectorAll('.locations');
  
  for(i=0; i<categories.length; i++){

    categories[i].addEventListener('click', function(){        
      this.children[1].classList.toggle('hide-item');

      this.addEventListener('mouseleave', function(){
        this.children[1].classList.remove('hide-item');
      })          
    })        
  }
}

@media (hover: none){
  /* This class will only exist when hover is not possible (Tablet or mobile devices) */
  .hide-item{
    display: none !important;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   #menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: center;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}

.categories {
  position: relative;
  display: inline-block;
  background-color: inherit;
  width: auto;
  height: auto;
  text-align: center;
  padding: 0px 15px 0px 15px;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
}

.categories:hover {
  color: #e5633f;
}

.categories .touch {
  position: relative;
  display: inline-block;
  width: auto;
  height: 42px;
  line-height: 42px;
}

.categories .touch:hover {
  color: #e5633f;
}

.categories .touch:before {
  content: "▪ ";
}

.locations {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
}

.locations a {
  display: block;
  font-size: 15px;
  padding: 0 40px 0 40px;
  text-transform: capitalize;
  height: 36px;
  line-height: 36px;
  border-left: 1px solid #121212;
  border-right: 1px solid #121212;
  border-bottom: 1px solid #121212;
}

.locations a:hover {
  color: #ffffff;
  background-color: #121212;
}

.categories:hover .locations {
  display: block;
  animation: santiaborg 555ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes santiaborg {
  0% {
    transform: scaleY(0) translateX(-50%);
  }
  80% {
    transform: scaleY(1.1) translateX(-50%);
  }
  100% {
    transform: scaleY(1) translateX(-50%);
  }
}

  </style>
</head>
<body>
  <div id="menu" class="active">
    <div class="categories" tabindex="1">
      <div class="touch">News</div>
      <div class="locations">
        <a href="link.html">Europe</a>
        <a href="link.html">Asia</a>
        <a href="link.html">Africa</a>
        <a href="link.html">Oceania</a>
        <a href="link.html">North America</a>
        <a href="link.html">South America</a>
      </div>
    </div>
  
    <div class="categories" tabindex="2">
      <div class="touch">Politics</div>
      <div class="locations">
        <a href="link.html">Europe</a>
        <a href="link.html">Asia</a>
        <a href="link.html">Africa</a>
        <a href="link.html">Oceania</a>
        <a href="link.html">North America</a>
        <a href="link.html">South America</a>
      </div>
    </div>
  
    <div class="categories" tabindex="3">
      <div class="touch">Economy</div>
      <div class="locations">
        <a href="link.html">Europe</a>
        <a href="link.html">Asia</a>
        <a href="link.html">Africa</a>
        <a href="link.html">Oceania</a>
        <a href="link.html">North America</a>
        <a href="link.html">South America</a>
      </div>
    </div>
  </div>

</body>
</html>

赞(0）回复(0）举报 2023-08-04

我来回答

jquery css悬停菜单，关闭下拉菜单时，相同的元素再次触摸iPad上

1条答案

相关问题

热门标签

最新问答