Question

我作为学校项目的一部分在下拉菜单上工作。我已经掌握了大部分工作正常但我遇到了一个JQuery事件的问题，我无法找到答案，每当我点击我的列表项时，它都会正确设置列表名称，但之后没有事件的工作。我把处理程序放在父元素上，看看是否有帮助，但仍然没有。

在这里快速浏览一下JQuery。

$(document).ready(function(){

$('nav ul').on('mouseenter', '.menu1', function(){
  $('.menu1 ul').removeClass("hidden");
});

$('nav ul').on('mouseleave', '.menu1', function(){
  setTimeout(function(){
    $('.menu1 ul').addClass("hidden");
  }, 300);
});

$('nav ul').on('click', '.menu1 ul li', function(){
  $('.menu1').text($(this).text());
});


});

我也有一个代码笔用于列表。

https://codepen.io/JFarenci/pen/gvoQvq

Answer 1

问题出在$('.menu1').text($(this).text());

在选择选项后执行此行后，li标记内的部分将更改为：<li class="menu1">one</li>（假设您选择了“1”）。 <{1}}标记以及下拉菜单将被覆盖。

要解决此问题，请使用单独的空格在ul标记上方显示所选选项。

HTML：

li

JAVASCRIPT：

    <p id="selected"></p>

希望这有帮助！

Answer 2

我删除了您的mouseenter和mouseleave个事件，并将其替换为mouseover。
在每个click上，我添加了一个span，其中包含$(this).text()。请注意，在设置文本时，先前有一个remove()来处理之前的点击。

请参阅runnable snippet进行测试。

＆＃13;

$(document).ready(function() {

  $('nav ul').on('mouseover', '.menu1', function() {
    setTimeout(function() {
      $('.menu1 ul').show();
    }, 300);
  });

  $('nav ul').on('click', '.menu1 ul li', function() {
    $('.menu1').find("#click").remove();
    $('.menu1').append('<span id="click">' + $(this).text() + '<span>');
  });


});

＆＃13;

nav {
  padding: 50px;
  text-align: center;
}

nav>ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  background: #ddd;
  border-radius: 5px;
}

nav>ul>li {
  float: left;
  width: 150px;
  height: 65px;
  line-height: 65px;
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

nav>ul>li:hover {
  background: #d5d5d5;
  border-radius: 5px;
}

ul.dropMenu {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  padding: 0;
}

ul.dropMenu li {
  background: #666;
  color: rgba(255, 255, 255, 0.7);
}

ul.dropMenu li:hover {
  background: #606060;
}

ul.dropMenu li:last-child {
  border-radius: 0px 0px 5px 5px;
}

.hidden {
  display: none;
  /*opacity: 0;*/
}

li:hover>ul.dropMenu {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

li:hover>ul.dropMenu li {
  opacity: 0;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

li:hover>ul.dropMenu li:nth-child(1) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(2) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 60ms;
  animation-delay: 60ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(3) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 120ms;
  animation-delay: 120ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(4) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 180ms;
  animation-delay: 180ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fold-out {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
  60% {
    -webkit-transform: rotateX(15deg);
    transform: rotateX(15deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

@keyframes fold-out {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
  60% {
    -webkit-transform: rotateX(15deg);
    transform: rotateX(15deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

li>ul.dropMenu {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

li>ul.dropMenu li {
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

li>ul.dropMenu li:nth-child(4) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(3) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 60ms;
  animation-delay: 60ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(2) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 120ms;
  animation-delay: 120ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(1) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 180ms;
  animation-delay: 180ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fold-in {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
}

@keyframes fold-in {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="menu1">
      <ul class="dropMenu hidden">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>fork</li>
      </ul>
    </li>
  </ul>

</nav>

＆＃13;

对元素文本的更改会破坏其父级委托事件处理程序

2 个答案: