javascript - div トグル スクリプト

Question

申し訳ありませんが、これをうまく説明できませんでした。jsfiddle にあるものをセットアップしました...

http://jsfiddle.net/greggb/Ya2wX/

基本的に私がやろうとしているのは、最初のdivが開かれた後、2番目のタブアンカー(2)が次のdivを開く前に最初のdivを閉じるようにすることですか?

ありがとう、グレッグ。

 $(document).ready(function() {
      $('.example2').hide().before('');
      $('a#toggle-example2').click(function() {
           $('.example2').slideToggle(500);
           return false;
      });
 });

 $(document).ready(function() {
      $('.item1').hide().before('');
      $('a#toggle-item1').click(function() {
           $('.item1').slideToggle(500);
           return false;
      });
 });

Answer 1

$('a#toggle-item1').click(function() {

ID は、ページ内の 1 つの要素を一意に識別する必要があります。. . .他の div に ID 'toggle item 1' を使用している場合、これは機能しません。. . 一意の ID またはクラスを使用してみてください

Answer 2

 $(document).ready(function() {
      $('.item1').hide();
      $('.item1').click(function() {
           $('.item1').not(this).hide();
           $(this).slideToggle(500);
           return false;
      });
 });

Answer 3

要素にtoggle_itemクラスを設定し、次を実行します。<a>

<a href="#" class="toggle-item">link 1</a>
<div class="item">content 1</div>

<a href="#" class="toggle-item">link 2</a>
<div class="item">content 2</div>

js:

$(function() {
      $('.item').hide();
      $('a.toggle-item').click(function() {
           $(this).next('.item').slideToggle(500);
           return false;
      });
});

フィドル

Answer 4

より短い方法があるかもしれませんが、これは機能するはずです (デモ: http://jsfiddle.net/6N4kJ/13/ ):

// When item 1 is clicked           
$('#item1').click(function() {
    // if item 2 is visible
    if ($('.item2').is(':visible')) {
        // hide (toggle) item2, and when finished..
        $('.item2').slideToggle(500, function() {
            // toggle item1
            $('.item1').slideToggle(500);
        });
    // else, just hide item1
    } else {
        $('.item1').slideToggle(500);
    }
});