建立一个jQuery菜单

Posted 2023-03-05

【中文标题】建立一个jQuery菜单

【英文标题】：building a jquery menu

【发布时间】：2015-02-13 08:23:55

【问题描述】：

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

但是它不是很优雅而且相当笨重。例如，当您单击“菜单”时，它会很快打开和关闭。

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

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

这是我的代码：fiddle

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

.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;

<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>

【问题讨论】：

不要只在问题中放置小提琴链接。当然也不要像这样绕过 “请将您的代码放在问题中” 弹出窗口！

【参考方案1】：

看来你是一个学习者使用这个代码

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

jquery

$ (document).ready(function() 

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

);

demo

【讨论】：

考虑到 OP 是“学习者”

，您可能想解释一下您在那里做什么

Thakns 伙计们，我已经学习了 3 个小时的 jquery，所以我有点摇摇欲坠。我使用了滑动切换并修改了我的 CSS。一切正常！谢谢

如果我的回答对你有帮助，请评分

【参考方案2】：

由于您一直在做的所有“褪色”，它会突然打开，而是使用slideDown() 打开菜单，这给它一个非常不错的条目.. 和slideUp() 关闭它。

使用mouseenter() 事件打开并使用mouseleave() 事件关闭它，而不是单击。

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

它已经准备好像新的一样使用了。

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

我让代码简单易懂……还有很多方法可以做同样的事情。

演示：http://jsfiddle.net/s94xhnw6/3/

jQuery：

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

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

【参考方案3】：

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>