javascript - 在“mouseenter”上显示 div 并在“click”上删除内部 div

Question

我有一个mouseenter关于两个元素的事件。mouseenter显示一个带有内容的 div ；在每个 div 中都有一个按钮，我想在其中附加一个事件来侦听一个click或tap允许删除自身，即 div。

这是 jQuery 中的脚本：

$(function() {
  var $subnav = $('.subnav');
  $("#discover #watch").on({
    mouseenter: function(e) {
      $subnav.show();
      $(".close").on('click tap', function(e) {
        if ($subnav) $subnav.hide();
        else $subnav.show();
      });
    },
    mouseleave: function() {
      $subnav.hide();
    }
});

$(function() {
  var $subnav = $('.subnav');

  $("#discover #watch").on({
    mouseenter: function(e) {
      $subnav.show();
      $(".close").on('click tap', function(e) {
        if ($subnav) $subnav.hide();
        else $subnav.show();
      });
    },
    mouseleave: function() {
      $subnav.hide();
    }
  });

});

header nav ul:not(:hover).discover-active .discover .nav-category {
    color: #ef4b4b;
}

nav ul li .nav-category {
    padding: 0 15px 0 30px;
    height: 58px;
    position: relative;
}

nav ul:not(:hover).discover-active .discover .nav-category:before {
    background-color: #ef4b4b;
    content: "";
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
}

header nav .nav-categories .nav-category-and-subnav.discover:hover .nav-category:before {
    background-color: #ef4b4b;
    content: "";
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
}

header nav .nav-categories .nav-category-and-subnav.watch:hover .nav-category:before {
    background-color: #e5059a;
    content: "";
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
}

.discover .subnav,
.watch .subnav,
.global-site-switch .subnav {
    display: none;
}

.discover .subnav img {
    width: 100%;
}

header nav .nav-categories .nav-category-and-subnav.discover:hover .subnav {
    background-color: #000;
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 59px;
    height: 530px;
    width: 635px;
}

header nav .nav-categories .nav-category-and-subnav.watch:hover .subnav {
    background-color: #000;
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 59px;
    height: 530px;
    width: 635px;
}

<nav>
  <ul class="nav-categories discover-active">
    <li class="nav-category-and-subnav discover">
      <div id="discover" class="nav-category">
        <span class="nav-category-padding">Discover</span>
        <i class="fa fa-angle-down" aria-hidden="true">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
                                    <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
                                  </svg>
                                </i>
        <div class="subnav">
          <a href="https://jump.refinery29.com/join/24/signup-ca-refresh"><img src="images/thisweek.jpg"></a>
          <p class="close">X</p>
        </div>
      </div>
    </li>
    <li class="nav-category-and-subnav watch">
      <div id="watch" class="nav-category">
        <span class="nav-category-padding">Watch</span>
        <i class="fa fa-angle-down" aria-hidden="true">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
                                    <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
                                  </svg>
                              </i>
        <div class="subnav">
          <div class="column">
            Original Series
          </div>
          <div class="column">
            Trending Videos
          </div>
          <p class="close">X</p>
        </div>
      </div>
    </li>
  </ul>
</nav>

我究竟做错了什么？

更新

显然我不得不更新脚本，因为我没有意识到它们是与 JS 冲突的 CSS 代码。作为一种解决方法，我必须使用 jQuery 选择器来实际选择:hover状态。该脚本有效，但只有一次。

     $(document).ready(function() {

        var $subnav = $('.subnav');
        $(".close").on('click tap', function(e) {
            if (!$subnav) {
                $subnav.show();
            }
            $subnav.hide();

        });

        $('.discover:hover, .watch:hover').on({
            mouseenter: function() {
                if (!$subnav) {
                    $subnav.show();
                }
                $subnav.hide();
            },
            mouseleave: function() {
                if ($subnav) {
                    $subnav.hide();
                }
                $subnav.show();
            }
        }

标签： javascriptjqueryhtmlcss

Answer 1

请在两个 id 选择器之间添加一个逗号 => #discover, #watch。将代码包装在文档中以确保安全，并将关闭事件处理程序放在鼠标进入/离开之外，因此它只应用一次。请参见下面的代码：

$(document).ready(function () {

    var $subnav = $('.subnav');
    $(".close").on('click tap', function (e) {
        if ($subnav) $subnav.hide();
        else $subnav.show();
    });

    $("#discover, #watch").on({
        mouseenter: function (e) {
            $subnav.show();
        },
        mouseleave: function () {
            $subnav.hide();
        }
    });

});