菜单中的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'
    });       
  });

所以，当我单击另一个菜单标记时，如何做到这一点?我之前单击的菜单标记在单击之前返回到状态。有人告诉我，对于单击的类，我应该使用“活动”类，但我不知道如何添加它以使其工作。

谢谢

Answer 1

当你看到你的小提琴时，很难猜出你到底在哪里寻找什么，但我认为它可能是这样的：

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>

我添加了神秘的活动类到你的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');
     }
 });

现在，只有应用于.menu链接和从.menu链接中删除的类.menu。其余的将由CSS来完成。

看小提琴。