Question

我已经构建了一个jquery菜单。

然而，它并不是非常优雅而且相当笨重。例如，当您点击菜单＆＃39;它快速打开并快速关闭。

此外，如果您打开菜单并将鼠标悬停在链接上，点击链接的左侧或右侧将导致菜单再次快速关闭

请有人帮助我让这更优雅一点吗？我尝试过使用幻灯片效果，但当用户将鼠标悬停在菜单上时会产生弹跳效果（菜单会一直打开和关闭）

这是我的代码：fiddle

＆＃13;

$(document).ready(function() {
  $('.menu').click(function() {
    $('.submenu').fadeToggle('1000');
  });
});

＆＃13;

.menu {
  width: 300px;
  margin: 20px auto 0 300px;
  vertical-align: top;
  padding: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  background: #34495E;
  border: 0px;
  border-bottom: 2px solid #2C3E50;
  -webkit-box-shadow: inset 0 -2px #34495E;
  box-shadow: inset 0 -2px #34495E;
  clear: both;
  margin-left: 66px;
}

.submenu {
  width: 300px;
  background-color: #6D767F;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #FFF;
  display: none;
}

ul li {
  list-style: none;
  padding: 11px;
  margin: 0px;
  text-transform: lowercase;
  font-weight: 700;
}

ul li a {
  text-decoration: none;
  font-size: 1.1em;
  color: #FFF;
}

ul li a:visited {
  text-decoration: none;
}

.submenu ul li:hover {
  background-color: #719ECC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <!-- START HEADER -->
  <ul>
    <li>menu</li>
  </ul>
  <div class="submenu">
    <ul>
      <li><a href="#">Mountain Bike</a></li>
      <li><a href="#">gopro</a></li>
      <li><a href="#">Shoei Helmet</a></li>
    </ul>
  </div>

＆＃13;

Answer 1

Demo

$(document).ready(function() {
  $('.menu').click(function() {
    $('.submenu').slideToggle('600'); /* using slideToggle will make the list slide elegantly */
  });
});

/* some changes to make it look elegant. */

body {
  font-family: helvetica;
}

.menu {
  width: 300px;
  margin: auto;
  vertical-align: top;
  padding: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  background: #34495E;
  border: 0px;
  border: 2px solid #2C3E50;
  -webkit-box-shadow: inset 0 -2px #34495E;
  box-shadow: inset 0 -2px #34495E;
}

.submenu {
  width: 300px;
  background-color: #6D767F;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #FFF;
  display: none;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  padding: 11px;
  margin: 0px;
  text-transform: lowercase;
}

ul li a {
  text-decoration: none;
  font-size: 1.1em;
  color: #FFF;
}

ul li a:visited {
  text-decoration: none;
}

.submenu ul li:hover {
  background-color: #719ECC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <!-- START HEADER -->
  <ul>
    <li>menu</li>
  </ul>
  <div class="submenu">
    <ul>
      <li><a href="#">Mountain Bike</a>
      </li>
      <li><a href="#">gopro</a>
      </li>
      <li><a href="#">Shoei Helmet</a>
      </li>
    </ul>
  </div>

Answer 2

因为所有“褪色”而被打开。你一直在做，而是使用slideDown()打开菜单，这样就可以获得一个非常不错的条目.. slideUp()可以关闭它。

取代点击，使用mouseenter()事件打开，mouseleave()事件关闭它。

从margins和paddings中删除额外的ul和li。

它已经准备好被用作新的。

使用slide event可以轻松纠正您所谈论的stop()的弹跳效果（菜单连续打开和关闭）。在元素上调用.stop()时，会立即停止当前正在运行的动画（如果有）。

我保持代码简单易懂，理解......还有很多方法可以做同样的事情。

DEMO ：http://jsfiddle.net/s94xhnw6/3/

<强> jQuery的：

$(document).ready(function () {
    $('.menu').on('mouseenter', function () {
        $('.submenu').slideDown();
    });

     $('.menu').on('mouseleave', function () {
        $('.submenu').stop().slideUp();
    });    
});

Answer 3

似乎你是一个学习者使用这个代码

 ul {
      height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;   
    }

jquery的

$ (document).ready(function() {

    $ ('.menu').click(function() {
    $('.submenu').slideToggle('1000');
});

});

demo

建立一个jquery菜单

3 个答案: