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() {
  $(this).parent().siblings().find('span').animate({width: 'hide'}, 200);
  $(this).next().animate({width: 'toggle'}, 200);
});

サンプル

于 2013-03-20T15:09:44.857 に答える
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 に答える