0

ID が「albums」、「about」、「contact」の 3 つの要素と、ID が「togglealbums」、「toggleabout」、「togglecontact」の toggle() 関数を介してそれらを表示/非表示にする 3 つのリンクがあります。 . これらの要素の 1 つだけをいつでも表示できるようにしたいので、次の関数を作成しました。

$('#togglealbums').click(function() {
  if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#albums').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#albums').toggle();
    });
  } else {
    $('#albums').toggle();
  }
});

$('#toggleabout').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#about').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#about').toggle();
    });
  } else {
    $('#about').toggle();
  }
});

$('#togglecontact').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#contact').toggle();
    });
  } else if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#contact').toggle();
    });
  } else {
    $('#contact').toggle();
  }
});

まず、これらが非常に非効率的である場合、またはこれを行う簡単な方法がある場合は、お知らせください。

私が見つけたのは、3 つの DIV のいずれも表示されていない場合、トグル リンクのいずれかをクリックすると、それぞれの div がアニメーションなしで表示/非表示になることです。ただし、DIV の 1 つが表示されている場合、別のトグル リンクをクリックすると、div が縮小してフェードし、新しいものが拡大してフェードインしますが、これは (少なくとも今のところ) 望ましくありません。これはhttp://new.e17.paca.arvixe.comで見ることができます。

なぜこれが起こっているのか誰にも教えてもらえますか？

ありがとう！

編集：

マークアップはここにあります：

<body>
  <div id="main">
    <div id="nav">
      <div id="menu">
        <ul>
          <li><a href="#" id="togglealbums">Albums</a></li>
          <li><a href="#" id="toggleabout">About Me</a></li>
          <li><a href="#" id="togglecontact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="albums">
      Albums go here
    </div>
    <div id="about">
      About info goes here
    </div>
    <div id="contact">
      Contact info goes here
    </div>
  </div>
</body>
4

1 に答える 1

2

.toggle()コールバック関数が与えられた場合、単にオン/オフを切り替えるのではなく、トグルをアニメーション化することを想定しているため、シュリンクアンドフェードが発生していました。（ドキュメントによると、この記事の執筆時点では、期間を指定した場合にのみ発生するはずです。これに関するバグレポートを提出しました。）

この縮小例については、http：//jsfiddle.net/mblase75/byKeP/1/を参照してください。これを解決するには、コールバックを削除して、関数の次の行に同じコードを配置します。

コードの合理化に関しては、クラスはあなたの友達です。HTML：

<a href="#" class="togglelink" data-block="albums" id="togglealbums">toggle albums</a>
<a href="#" class="togglelink" data-block="about" id="toggleabout">toggle about</a>
<a href="#" class="togglelink" data-block="contact" id="togglecontact">toggle contact</a>

<div class="toggleblock" id="albums">ALBUMS</div>
<div class="toggleblock" id="about">ABOUT</div>
<div class="toggleblock" id="contact">CONTACT</div>

jQueryが解析し、メソッドdata-を介してアクセスできるようにする属性に注意してください。.data()これによりdiv、ハイパーリンク自体に一意のIDを簡単に保存できるようになり、JavaScriptが大幅に合理化されます。JS：

$('.togglelink').on('click',function(e) {
    var id = $(this).data('block');
    $('#'+id).toggle().siblings('.toggleblock').hide();
});​

http://jsfiddle.net/mblase75/byKeP/

于 2012-10-30T18:11:46.877 に答える