Question

我在按水平手风琴菜单创建某些内容时遇到了麻烦。我试图将代码保持在最低限度，以便它不会在页面上显示，并且可以轻松地在移动或桌面上使用。

我设法动画菜单打开，但现在我想关闭一个打开按钮，如果我点击另一个。我假设这是一个简单的“如果”“其他”陈述，但我已经反复尝试过，似乎无法让它按照我的意愿运作。

这就是我拥有的代码：

HTML：

<nav>
                <ul>
                    <li> <a href="#"><img src="images/header_icon_home.gif" width="45" height="45" alt="home"></a>
                      <span>home</span></li>
                    <li> <a href="#"><img src="images/header_icon_portfolio.gif" width="45" height="45" alt="porfolio"></a>
                      <span>portfolio</span></li>
                    <li> <a href="#"><img src="images/header_icon_blog.gif" width="45" height="45" alt="blog"></a>
                      <span>blog</span></li>
                    <li> <a href="#"><img src="images/header_icon_about.gif" width="45" height="45" alt="about"></a>
                      <span>about</span></li>
                    <li> <a href="#"><img src="images/header_icon_contact.gif" width="45" height="45" alt="contact"></a>
                      <span>contact</span></li>
                    <li> <a href="#"><img src="images/header_icon_search.gif" width="45" height="45" alt="search"></a>
                  <span class="search"><input name="search" id="search" ></input></span></li>
                </ul>
            </nav>

CSS：

nav ul {
 position:absolute;
 right:0;
 top: 42px;
}
nav ul li {
 display: inline-block;
 float:left;
}
nav ul li img {
 float:left;
}
nav ul li span {
 background-color: #333;
 color: #fff;
 padding: 13px 5px;
 float:left;
 font-size:16px;
 display:none;
}
nav ul li span.search {
 padding: 12px 10px 12px 5px;
 background-color: #666;
}
nav ul li span input {
 font-size:12px;
}

JAVASCRIPT：

$('nav ul li a').click(function() {
 $(this).next().animate({width: 'toggle'}, 200);
   });

或

$('nav ul li a').click(function() {
        $(this).next().animate({width: 'show'}, 600);
      });

Answer 1

试试这个

$('nav ul li a').click(function() {
    $('nav ul li a').next().animate({width: 'hide'}, 200);
    $(this).next().animate({width: 'toggle'}, 200);
});

<强> DEMO

Answer 2

试试这个：

$('nav ul li a').click(function() {
  $(this).parent().siblings().find('span').animate({width: 'hide'}, 200);
  $(this).next().animate({width: 'toggle'}, 200);
});

<强> Sample

水平手风琴菜单

2 个答案: