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();
            }
        }

Answer 1

如果你想使用纯 JavaScript，你需要:

1. 通过向 subnav div 添加 display:none; css 属性，确保默认情况下隐藏您的 subnav div .

2. 然后您可以使用 getComputedStyle()要检索该 display 属性值并基于该检索值，您可以继续并在 mouseenter 或 时切换 subnav 显示属性>mouseleave 事件被触发。

3. 最后，您可以使用 parentElement()每当单击子 X 元素时关闭父 subnav div 的属性。

---

您可以在这个 jsFiddle 中查看我上面描述的实际示例或在下面的代码片段中:

var discover = document.getElementById("discover");
var watch = document.getElementById("watch");
var close = document.querySelectorAll(".close");

function openSub(e) {
    var subNav = e.target.childNodes[5];
    var x = window.getComputedStyle(subNav);
    if (x.display == "none") {
    	subNav.style.display = "block";
    } else {
    	subNav.style.display = "none";
    }
}
function closeSub(e) {
    var subNav = e.target.childNodes[5];
    subNav.style.display = "none";
}

discover.addEventListener("mouseenter", openSub);
watch.addEventListener("mouseenter", openSub);

discover.addEventListener("mouseleave", closeSub);
watch.addEventListener("mouseleave", closeSub);

function btnSub(e) {
    e.target.parentElement.style.display = "none";
}

close.forEach(btn => {
btn.addEventListener("click", btnSub);
});

.subnav { background: green;display: none;}

<nav>
  <ul>
    <li>
      <div id="discover" class="nav-category">
        <span>Discover</span>
        <p>
        SVG here
        </p>
        <div class="subnav">
          <p>
          IMG here
          </p>
          <p class="close">X</p>
        </div>
      </div>
    </li>
    <hr>
    <li>
      <div id="watch" class="nav-category">
        <span>Watch</span>
       <p>
        SVG here
        </p>
        <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>