0

我无法按照水平手风琴菜单的方式创建一些东西。我试图在代码运行时将其保持在最低限度，这样它就不会出现在页面上，并且可以轻松地在移动设备或桌面设备中使用。

我已经设法为要打开的菜单设置动画，但现在我想在单击另一个按钮时关闭一个打开按钮。我想这是一个简单的“if”“else”语句，但我一遍又一遍地尝试，似乎无法让它按我的意愿工作。

这是我拥有的代码：

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

2 回答 2

0

尝试这个

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

演示

于 2013-03-20T15:08:37.827 回答
0

尝试这个：

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

样本

于 2013-03-20T15:09:44.857 回答