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

请在两个ID选择器之间添加一个逗号=>＃discover，＃watch。为了安全起见，将代码包装在文档中，然后将close事件处理程序放到鼠标进入/离开的外部，因此仅应用一次。参见下面的代码：

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

});

Answer 2

如果要使用纯JavaScript，则需要：

通过在subnav div中添加display:none; css属性，确保默认情况下两个subnav div都被隐藏。
然后，您可以使用getComputedStyle()来检索该display属性值，并基于该检索到的值，只要{{{ 1}}或subnav事件被触发。
最后，只要单击子mouseenter元素，就可以使用parentElement()属性关闭父mouseleave div。

您可以在上述jsFiddle或下面的代码段中查看我上面所描述内容的实际示例：

subnav

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

Answer 3

您需要在被单击元素的上下文中找到按钮：

$(e.target).find(".close").on ....

Answer 4

从现有.close侦听器中移除mouseenter单击事件侦听器，并定位父元素。

$(".close").on('click tap', function(e) {
    $(this).parent().hide();
});

更新的解决方案

我还删除了条件语句，好像.close元素仅在父级可见的情况下才可以单击，因此无需注意“隐藏的父级”

在“ mouseenter”上显示div，在“点击”上删除内部div

4 个答案: