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保持不变：

def extreme(x):
    """returns True if the string contains at least one exclamation point

    str -> str"""
    if x.find('!') != -1:
        return True
    else:
        return False

def all_extreme(x):
    """returns true if all of the strings contain exclamation points

    str, str... -> str"""
    for word in x:
        if extreme(x) == True:
            return True
        else:
            return False

我将神秘的活动类添加到您的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>

现在JavaScript可以简单得多：

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

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

See the FIDDLE

菜单中的jQuery效果

1 个答案: