主页 / 问题 / 845198
Accepted
Nice
Asked:2020-06-22 12:59:07 +0800 CST2020-06-22 12:59:07 +0800 CST

反转 :hover 的效果

  • 772

有一个菜单，在一些子菜单项中。当在计算机上以 768px 的分辨率打开站点时，效果通过 :hover 伪类应用。所以问题是我需要以某种方式取消低于 768px 分辨率的悬停效果（显然可以在媒体查询中执行此操作），然后在低于 768px 的分辨率下应用 jQuery 脚本，该脚本在下面用于切换班级。

首要任务是如何让我的 jQuery 脚本只在低于 768px 的分辨率下触发。怎么可能实施？

这是菜单：

  $('.toggle-menu').click(function() {
    $('.toggle-menu').removeClass('active');
    $(this).toggleClass('active');
  });
.topmenu {
  display: flex;
  flex-wrap: wrap;
  backface-visibility: hidden;
  background: #fff;
}

.topmenu>li {
  display: inline-block;
  position: relative;
}

.topmenu>li>a {
  height: 30px;
  line-height: 30px;
  padding: 0 7px;
  font-weight: bold;
  color: #6EA3DD;
  text-transform: uppercase;
  transition: .1s ease-in-out;
  border-bottom: 2px solid #fff;
}

.topmenu>li>a.actual-menu {
  border-bottom: 2px solid #FBC7CB;
}

.down:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #6EA3DD;
  left: 47%;
  bottom: -7px;
  z-index: 100;
}

.topmenu li a:hover {
  color: #E6855F;
  border-bottom: 2px solid #FBC7CB;
  transition: .1s ease-in-out;
}

.submenu {
  background: white;
  border: 2px solid #95BCE6;
  position: absolute;
  left: 5%;
  right: -35%;
  visibility: hidden;
  opacity: 0;
  padding: 0 10px 5px;
  z-index: 150;
  transition: .1s ease-in-out;
  transform: translate(0%, 15px);
}

.topmenu>li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(0%, 0px);
}

.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="navigate" class="navigate">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="navigate__menu">
          <nav>
            <ul class="topmenu">
              <li class="toggle-menu"><a href="#" hreflang="en" class="down">Learn French</a>
                <ul class="submenu">
                  <li><a href="#">Why study French?</a></li>
                  <li><a href="#">French on Skype</a></li>
                  <li><a href="#">A few steps</a></li>
                  <li><a href="#">Our French lessons</a></li>
                </ul>
              </li>
              <li><a href="ourtutor.html" hreflang="en">Our Tutor</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</section>

jquery

2 个回答

  1. Best Answer

    要取消一个动作hover，默认情况下对事件执行的操作就足够了hover。

    在这里你会看到如果你看这个例子先折叠然后展开到整个页面

    * {
  list-style: none;
  text-decoration: none;
}
ul{
  display:inline-block;
}
ul a,
ul span {
  font-weight: 900;
  color: blue;
}

li ul {
  display: none;
}

li:hover ul {
  display: block;
}

@media (max-width:768px) {
  li ul {
    display: block;
  }
}
    <ul>
  <li><a href="">item1</a></li>
  <li><span>item2</span>
    <ul>
      <li><a href="">item2-1</a></li>
      <li><a href="">item2-2</a></li>
      <li><a href="">item2-3</a></li>
    </ul>
  </li>
  <li><a href="">item3</a></li>
</ul>

    关于第二个问题，如何在一定的屏幕分辨率下启用脚本。它是这样完成的：

    $(window).on("load resize", function() {

      if ($(document).width() < 768) {
        $.getScript("script.js");
      }
  });

    • 2

  2. 除了你的问题之外，在悬停时创建下拉菜单本身就是界面中的反模式，仅仅是因为没有鼠标的人，或者不能充分使用鼠标的人，将无法打开这个菜单. 至少，值得为元素添加焦点菜单打开。

    此外，如果我是你，在加载和连接处理程序脚本时我不会被绑定到特定的分辨率，因为首先，iPad 现在在纵向模式下甚至开始宽度为 768 像素，但也有横向，还有更多除了 iPad，还有很多东西。其次，例如，带有触摸屏的笔记本电脑，没有人确切知道一年后会出现什么设备。

    一般来说，我会做这样的事情：

    window.addEventListener('touchstart', function firstTouch () {
  document.body.classList.add('touch-device')
  
  window.removeEventListener('touchstart', firstTouch, false)
}, false)

document.documentElement.addEventListener('touchstart', function (e) {
  var dropdownBtn = document.querySelector('.down')
    
  if (e.target.matches('.down')) {
    dropdownBtn.classList.toggle('down--active')
  } else {
    dropdownBtn.classList.remove('down--active')
  }
})
    .topmenu {
  display: flex;
  flex-wrap: wrap;
  backface-visibility: hidden;
  background: #fff;
}

.topmenu>li {
  display: inline-block;
  position: relative;
}

.topmenu>li>a {
  height: 30px;
  line-height: 30px;
  padding: 0 7px;
  font-weight: bold;
  color: #6EA3DD;
  text-transform: uppercase;
  transition: .1s ease-in-out;
  border-bottom: 2px solid #fff;
}

.topmenu>li>a.actual-menu {
  border-bottom: 2px solid #FBC7CB;
}

.down:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #6EA3DD;
  left: 47%;
  bottom: -7px;
  z-index: 100;
}

.topmenu li a:hover {
  color: #E6855F;
  border-bottom: 2px solid #FBC7CB;
  transition: .1s ease-in-out;
}

.submenu {
  background: white;
  border: 2px solid #95BCE6;
  position: absolute;
  left: 5%;
  right: -35%;
  visibility: hidden;
  opacity: 0;
  padding: 0 10px 5px;
  z-index: 150;
  transition: .1s ease-in-out;
  transform: translate(0%, 15px);
}

:not(.touch-device) .down:hover + .submenu,
:not(.touch-device) .down:focus + .submenu,
.down.down--active + .submenu,
.submenu:focus-within {
  visibility: visible;
  opacity: 1;
  transform: translate(0%, 0px);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="navigate" class="navigate">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="navigate__menu">
          <nav>
            <ul class="topmenu">
              <li class="toggle-menu"><a href="#" hreflang="en" class="down">Learn French</a>
                <ul class="submenu">
                  <li><a href="#">Why study French?</a></li>
                  <li><a href="#">French on Skype</a></li>
                  <li><a href="#">A few steps</a></li>
                  <li><a href="#">Our French lessons</a></li>
                </ul>
              </li>
              <li><a href="ourtutor.html" hreflang="en">Our Tutor</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</section>

    • 判断是否使用了触摸；
    • 基于类构建悬停和焦点逻辑.touch-device；
    • 添加到逻辑:focus-within；
    • 根据权限不加载脚本。
    • 0

相关问题