1

このアニメーションを機能させようとしているので、一度に content5 div の 1 つだけが開かれます。現在、3 つの見出し 5 div と 3 つのコンテンツ 5 div があります。見出し 5 のリンクの 1 つをクリックして content5 の子を「開く」と、他の content5 の子は開いているか閉じる必要があります。これは簡単なはずだとわかっていますが、うまくやってのけることができないようです。もっとクロックフォードを見る必要があります。助けてくれてありがとう。

$(document).ready(function() {
  $(".content5").hide();
  $(".heading5").click(function()
  {
    $(this).next(".content5").animate({width: 'toggle'}, 'slow');
  });
});

ここにhtmlがあります

<div class="heading5 menu-item-text" id="leftend">About</div>
<div class="content5 clearfix" id="menu-1">
  //Links in here
</div>
<div class="heading5 menu-item-text"><a href"#" data-target="2">Contact</a></div>
<div class="content5 clearfix"  id="menu-2">
      //More links in here
</div>
<div class="heading5 menu-item-text" data-target="3"><a href"#">Portfolio</a></div>
<div class="content5 nav clearfix" id="menu-3"  data-option-key="filter">
//and more in here
</div>

ここにフィドルがありますhttp://jsfiddle.net/jkuhns/NRsXS/

メニューを横にスライドさせると途切れる可能性があるので危険だと認識していますが、画面サイズごとに異なるメニューのスタイルを設定しているので問題ありません。フィドルでは、恐ろしいマウスオーバー効果を無視してください。私はまだ敗北していないクエリモバイルでcssスタイルと戦っています。

4

1 に答える 1

0

列の直前

$(this).next(".content5").animate({width: 'toggle'}, 'slow');

追加

$('.content5').animate({width: 0}, 'slow')

編集: フィドルの更新されたコード: jsfiddle.net/fNZaV/2

于 2013-02-27T05:47:51.013 に答える