Question

我是javascript的新手。我没有编写脚本的技术技能。在这里，我试图在javascript的帮助下编写下拉功能。我达到了80％左右。我的问题是，当悬停在不可见/隐藏的UL元素上时，ul被填充/可见。对于滑动动画，我使用了CSS过渡。请帮我100％完成我的任务。 Here is my current working demo.。请将鼠标移到我们左下方（不要将鼠标悬停）。我在问这个问题。

＆＃13;

$(document).ready(function() {
  $(".menu-trigger").css({"display": "none"});
  $(".main-nav li").bind('mouseenter mouseleave', function() {
    $(this).toggleClass("v-hover");
  });
});

＆＃13;

.navigation {
  background-color: #262626;
  display: block;
  margin-top: 30px;
  min-height: 36px;
  position: relative;
  width: 100%;
}

.navigation .menu-trigger {
  background-color: #ff8919;
  height: 42px;
  left: 0;
  padding: 7px 6px;
  position: absolute;
  width: 40px;
  z-index: 2;
}

.navigation .menu-trigger span {
  background-color: #262626;
  display: block;
  height: 3px;
  width: 22px;
}

.navigation .menu-trigger span + span {
  margin-top: 3px;
}

.main-nav {
  background-color: #262626;
  margin: 0 auto;
  max-width: 1070px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.main-nav ul {
  margin: 0;
  padding: 0;
}

.main-nav li {
  display: inline-block;
  float: left;
  position: relative;
  text-align: left;
}

.main-nav a {
  background-color: #262626;
  border-bottom: #1e1e1e solid 1px;
  color: #fff;
  display: block;
  font-size: 15px;
  padding: 10px 22px;
  text-decoration: none;
  text-transform: capitalize;
}

.main-nav a:hover {
  background-color: #5a5a5a;
}

.main-nav li ul {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 42px;
  width: 240px;
  transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  -webkit-transform: translateY(-20px);
}

.main-nav li.v-hover ul {
  opacity: 1;
  transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  -webkit-transform: translateY(0);
}

.main-nav li li {
  display: block;
  float: none;
}

＆＃13;

<section class="navigation" role="navigation">
  <button class="menu-trigger">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <nav class="main-nav">
    <ul>
      <li><a href="">home</a></li>
      <li><a href="">about us</a>
        <ul>
          <li><a href="">Comapny</a></li>
          <li><a href="">mission</a></li>
          <li><a href="">vision</a></li>
        </ul>
      </li>
      <li><a href="">services</a></li>
      <li><a href="">gallery</a></li>
      <li><a href="">blog</a></li>
      <li><a href="">contact us</a></li>
    </ul>
  </nav><!-- End of .main-nav -->
</section><!-- End of .navigation -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

＆＃13;

Answer 1

添加此

$(".menu-trigger").css({"display", "none"});

而不是

$(".menu-trigger").css({"display": "none"});

Fiddle

Answer 2

您可以使用jquery的mouseenter函数，而不是将mouseleave和hover事件绑定到元素。请在下面找到一个简单的例子，

＆＃13;

$(document).ready(function() {
		$('.main_nav li ul').hide().removeClass('fallback');
		$('.main_nav li').hover(
			function () {
				$('ul', this).stop().slideDown(100);
			},
			function () {
				$('ul', this).stop().slideUp(100);
			}
		);
});

＆＃13;

.main_nav {background:#FFF;float:left;}
.main_nav ul {text-align:center;}
.main_nav ul li {float:left;display:inline;}
.main_nav ul li:hover {background:#E6E6E6;}
.main_nav ul li a {display:block;padding:15px 25px;color:#444;}
.main_nav ul li ul {position:absolute;width:110px;background:#FFF;}
.main_nav ul li ul li {width:110px;}
.main_nav ul li ul li a {display:block;padding:15px 10px;color:#444;}
.main_nav ul li ul li:hover a {background:#F7F7F7;}
.main_nav ul li ul.fallback {display:none;}
.main_nav ul li:hover ul.fallback {display:block;}

＆＃13;

<section class="main_nav">
  <ul>
    <li><a href="#">Tab 1</a></li>
    <li>
      <a href="#">Tab 2</a>
      <ul class="fallback">
        <li><a href="#">Sub-Tab 1</a></li>
        <li><a href="#">Sub-Tab 2</a></li>
        <li><a href="#">Sub-Tab 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Tab 3</a>
      <ul class="fallback">
        <li><a href="#">Sub-Tab 1</a></li>
        <li><a href="#">Sub-Tab 2</a></li>
        <li><a href="#">Sub-Tab 3</a></li>
        <li><a href="#">Sub-Tab 4</a></li>
      </ul>
    </li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
    <li><a href="#">Tab 6</a></li>
  </ul>
</section>

＆＃13;

移动子元素时阻止悬停功能

2 个答案: