0

私は4つのdivを持っていますが、そのうちの2つはクリック（リンク）で表示され、同じように非表示になります。他の2つのdivのリンクをクリックすると、最初の2つが再び非表示になり、その逆になります。現在、2つのリンクがクリックされた場合、4つのdivすべてが表示されます。

簡単：[リンク]>[divを表示]をクリックします。2番目のリンクをクリック>最初のdivを非表示にしながら2番目のdivを表示

2つのリンク：

 <a class="show_hideAbout show_hideAboutArr" href="#" >About</a>

 <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

最初の2つのdiv：

<div class="slidingDivAbout">Some Content</div>
<div class="slidingDivAboutArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

他の2つのdiv： 

<div class="slidingDivContact">Some Content</div>
<div class="slidingDivContactArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

そして私のスクリプト：

$(document).ready(function() {
  $(".slidingDivAbout").hide();
  $(".show_hideAbout").show();

  $('.show_hideAbout').click(function() {
    $(".slidingDivAbout").slideToggle(350);
  });

  $(".slidingDivAboutArr").hide();
  $(".show_hideAboutArr").show();

  $('.show_hideAboutArr').click(function() {
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
  });
  $(".slidingDivContact").hide();
  $(".show_hideContact").show();

  $('.show_hideContact').click(function() {
    $(".slidingDivContact").slideToggle(350);
  });

  $(".slidingDivContactArr").hide();
  $(".show_hideContactArr").show();

  $('.show_hideContactArr').click(function() {
    $(".slidingDivContactArr").fadeToggle("fast", "linear");
  });
});​
4

6 に答える 6

1

マークアップを変更せずに、これを使用できます。

$(document).ready(function() {
    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0);

    $('.show_hideAbout').click(function() {
        $(".slidingDivContact").slideUp(300, function() {
            $(".slidingDivContactArr").fadeOut(300, function() {
                $(".slidingDivAbout").slideToggle(350, "linear", function() {
                    $(".slidingDivAboutArr").fadeToggle(350);
                });
            });
        });
    });
    $('.show_hideContact').click(function() {
        $(".slidingDivAbout").slideUp(300, function() {
            $(".slidingDivAboutArr").fadeOut(300, function() {
                $(".slidingDivContact").slideToggle(350, function() {
                    $(".slidingDivContactArr").fadeToggle(350, "linear");
                });
            });
        });
    });
});

作業サンプル

于 2012-05-28T17:28:22.590 に答える
1

こんにちは私はこのjsfiddleの例のようにそれをしたでしょう

HTML

<a class="show_hideAbout" href="#" >About</a>

<a class="show_hideContact" href="#" >Contact</a>
<div class="slidingDivAbout">Some Content1</div>
<div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
<div class="slidingDivContact">Some Content2</div>
<div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>​

脚本

$(function(){

         $('.slidingDivAbout').hide();
         $('.slidingDivAboutArr').hide();
         $('.slidingDivContact').hide();
         $('.slidingDivContactArr').hide();

         $('.show_hideAbout').click(function() {
            $('.slidingDivAbout').show(350);
            $('.slidingDivAboutArr').show()
            $('.slidingDivContact').hide();
            $('.slidingDivContactArr').hide();
        });

        $('.show_hideContact').click(function() {         
            $('.slidingDivContact').show(350);
            $('.slidingDivContactArr').show('fast', 'linear');
            $('.slidingDivAbout').hide();
            $('.slidingDivAboutArr').hide();
        });
});
于 2012-05-28T17:29:54.400 に答える
0

多分このようなことを試してみませんか？

<a class="show_hideAbout" href="#" >About</a>
<a class="show_hideContact" href="#" >Contact</a>

<div class="divAbout">
  <div class="slidingDivAbout">Some Content</div>
  <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

<div class="divContact">
  <div class="slidingDivContact">Some Content</div>
  <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

そしてjavascript：

$(document).ready(function() {

    $(".divAbout").hide();
    $(".divContact").hide();

    $('.show_hideAbout').click(function() {
        if( $(".divContact").is(":visible") ) {
          $(".divContact").slideToggle(350, 'linear', function(){
            $(".divAbout").slideToggle(350, 'linear');
          });
        } else {
          $(".divAbout").slideToggle(350, 'linear');
        }
    });

    $('.show_hideContact').click(function() {
        if( $(".divAbout").is(":visible") ) {
          $(".divAbout").slideToggle(350, 'linear', function(){
            $(".divContact").slideToggle(350, 'linear');
          });
        } else {
          $(".divContact").slideToggle(350, 'linear');
        }
    });

});​
于 2012-05-28T17:00:28.903 に答える
0

リンクごとに、クリックを1回バインドする必要があります。 

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a>
<a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

次の2つは、クリックを同じタグにバインドするため、重複しています。class = "show_hideAbout show_hideAboutArr"）

$('.show_hideAbout').click(function(){
      $(".slidingDivAbout").slideToggle(350);
      });

$('.show_hideAboutArr').click(function(){
      $(".slidingDivAboutArr").fadeToggle("fast", "linear");
      });

1つだけ保持します。と

$('.show_hideAbout').click(function(){
    $(".slidingDivAbout").slideToggle(350);
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
});
于 2012-05-28T17:05:17.823 に答える
0

たくさんのhide/showメソッドよりも、CSSクラスでこれを行う方が良いと思います。HTMLは次のようになります。

<a class="showAbout" href="#" >About</a>
<a class="showContact" href="#" >Contact</a>
<div id='wrapper'>
    <div class="about">
        <div class="slidingDivAbout">Some Content 1</div>
        <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
    <div class="contact">
        <div class="slidingDivContact">Some Content 2</div>
        <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
</div>

2つのCSSルールを使用：

#wrapper > div {
    display: none;
}
​#wrapper > div.show {
    display: block;
}​

そして、jQuery：

$(function() {

    $(document).on('click', '.showAbout', function() {
        $('.about').siblings('div').removeClass('show').end().toggleClass('show');
    });

    $(document).on('click', '.showContact', function() {
        $('.contact').siblings('div').removeClass('show').end().toggleClass('show');
    });

});​
于 2012-05-28T17:17:10.350 に答える
0

私はあなたのhtmlタグでカスタム属性を使用します：

これが実際のデモです

HTML：

<a class="slidingLink" slide="about" href="#" >About</a>
<a class="slidingLink" slide="contact" href="#" >Contact</a>

<div class="slidingContainer" id="about">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>
<div class="slidingContainer" id="contact">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>​​​​​​​​​​​​​​​​

JavaScript：

$(document).ready(function(){
    $('.slidingContainer').hide();
    $('.slidingLink').click(function () {
        var toSlide = $(this).attr("slide");
        $("#"+toSlide).slideDown(350);
        $('.slidingContainer').each(function () {
            if ($(this).attr("id") != toSlide) {
                $(this).slideUp(350);
            }
        });
    });
});

これは絶対に一般的であるため、新しいリンクを追加するために必要なのは、クラスを持つdivのに属性が設定された新しいaタグを追加することだけです。slideidslidingContainer

于 2012-05-28T17:23:46.147 に答える