jQuery 菜单中的效果

Question

我正在尝试做一个菜单，当你点击其中一个标签时，它会产生一些效果并且 css 会发生变化，但是当我点击另一个标签时，我点击的标签不会返回到第一个状态，因此它保留更改。

这是我的菜单：

<ul id="navbar" class="col-md-24">
  <li><a href="#" class="menu">Home</a></li>
  <li><a href="#" class="menu">About</a></li>
  <li><a href="#" class="menu">Services</a></li>
  <li><a href="#" class="menu">Contact</a></li>
</ul>

这是我的 jQuery:

$('.text').hover(function(){
  $(this).find('.text').slideUp();
});
$('.menu').click(function() {
  $('.menu').not(this).slideDown();
    $(this).animate({
      width: "300px",
      height: "100px",
      'line-height':'60px',
      fontSize: "2em" 
    }).css({
      'border':'none',
      'background':'#fff',
      'padding': '20px 20px',
      'color':'#1b1b1b',
      'border-radius': '5px',
      'text-decoration':'none',
      'overflow': 'hidden'
    });       
  });

那么，当我点击另一个菜单标签时，我之前点击的菜单标签又回到点击前的状态，我该怎么做呢？有人告诉我我应该使用 "active" class 来点击那个，但我不知道如何添加它才能使它起作用。

谢谢

Answer 1

当看到你的 fiddle 时，很难猜到你真正在寻找什么，但我认为它可能是这样的：

您的 HTML 保持原样：

<ul id="navbar" class="col-md-24">
    <li><a href="#" class="menu">Home</a>
    </li>
    <li><a href="#" class="menu">About</a>
    </li>
    <li><a href="#" class="menu">Services</a>
    </li>
    <li><a href="#" class="menu">Contact</a>
    </li>
</ul>

我将神秘的 active-class 添加到您的 CSS 中，放入您想要设置动画的所有值并进行了一些调整。看代码中的注释：

body {
    background-color:#1b1b2b;
}
#navbar {
    text-align: center;
    margin-bottom:80px;
}
ul#navbar {
    width:100%;
    display: block;
}
#navbar li {
    display:inline-block;
    margin: 0 auto;
    vertical-align: top; /* makes the .menus stay at the top */
}
.menu {
    display: inline-block; /* important to animate the width */
    color:white;
    width: 100px; /* put in values so we can animate them */
    background:black;
    padding:10px 20px;
    font-size:16px;
    line-height: 1em; /* put in values so we can animate them */
    height: 1em; /* put in values so we can animate them */
    text-decoration:none;
    letter-spacing:3px;
    text-transform:uppercase;
    border-radius:5px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s; /* here is the magic: CSS will do the animation*/
    /* when class .active is applied or removed */ 
}
.menu:hover {
    border:none;
    background:#fff;
    padding:20px;
    color:#1b1b1b;
    text-decoration:none;
}
.active { /* the CSS when the .menu is clicked on */
    border: 0 none;
    background:#fff;
    color: #1b1b1b;
    overflow: hidden;
    width: 300px;
    height: 100px;
    line-height: 80px;
    font-size: 2em;
    border-radius:15px;
    padding:20px;
}

现在 JavaScript 可以简单很多：

 $('.menu').click(function () {
     if ($(this).hasClass('active')) {
         $(this).removeClass('active');
         return;
     } else {
         $('.menu').removeClass('active');
             $(this).addClass('active');
     }
 });

现在只有 class .active 应用于 .menu 链接并从中删除。 CSS 会完成剩下的工作。

See the FIDDLE.

jQuery 菜单中的效果

jQuery effects in menu

jquery

menu

click

html-lists