3

誰かがこのコードで私を助けることができます.方法を知っていれば簡単だと思います..?

現在、クリックして切り替えるボックスが下に表示されます。

もう一方のトグルをクリックすると、現在開いているボックスが閉じるので、両方同時に開くことは基本的に不可能ですか？

ただし、開いている場合はもう一方 (開いている場合) も閉じるだけで、通常どおり個々の開閉を切り替えることができます。

これまでのところ.. http://jsfiddle.net/CkTRa/380/

ありがとうございました。

アップデート：

このように独立したボックスをターゲットにすることはできますか?

HTML:

<div>
<h3 class = "trigger"> <a href="#box1">Heading 1</a></h3> 
</div>
<div>
<h3 class = "trigger"><a href="#box2">Heading 2</a></h3>
</div>

<div class = "toggle" id="box1">
    box one content
</div>
<div class = "toggle" id="box2">
    box two content
</div>​

これまでのjQuery：

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle("slow");
});
4

5 に答える 5

3

この単純なコードは完全に機能するはずだと思います

$(".trigger").click(function(){
    $(".trigger").not(this).next(".toggle").slideUp("slow");
    $(this).next(".toggle").slideToggle("slow");
});

jsFiddleデモを見る

于 2012-06-26T12:10:59.377 に答える
0

最も簡単な方法は、開いたクラスにクラスを追加し、そのクラスを使用して開いたクラスをターゲットにすることです。たとえば、クラスopenを開いたときにクラスを追加し、セレクターを使用して開いたクラス.openを閉じることができます。

$(".trigger").click(function(){
    $('.open').slideToggle('slow').toggleClass('open');       
    $(this).next(".toggle").toggleClass('open').slideToggle("slow");
 });

実例： http： //jsfiddle.net/CkTRa/389/

于 2012-06-26T11:24:39.887 に答える
0

より良いアプローチは次のとおりです。

jsFiddle デモ

  • 2 つ以上の見出しを持つことができます。
  • すでに開いているものを切り替えます
  • もう一度クリックすると、開いているものを閉じるだけです

jQuery:

$('.trigger').next('.toggle').hide();
$('.trigger').click(function() {
    var el = $(this).next('.toggle');
    var doit = el.is(':visible') ? el.slideUp() : ($('.toggle').slideUp()) (el.slideDown());
});
于 2012-06-26T11:44:59.543 に答える
0

これは1つの解決策です。1つをクリックすると、最初にすべて（存在する場合）を閉じてから、クリックしたものを開きます：

$(".trigger").click(function(){
  $(".trigger").next(".toggle").slideUp("slow");
  $(this).next(".toggle").slideDown("slow");
});

唯一の欠点は、開いているものをもう一度クリックすると、閉じて再度開くことですが、それが機能に問題があるかどうかはわかりません.

于 2012-06-26T11:27:09.900 に答える
0

この問題に対する私の解決策は次のとおりです。

$(".trigger").click(function() {
    $(this).addClass('current');
    $('.trigger:not(.current)').next(".toggle").slideUp('slow');
    $(this).removeClass('current').next(".toggle").slideToggle("slow");
});​

http://jsfiddle.net/paragnair/CkTRa/391/

更新: 次の例では、他の見出しが上にスライドされた後にのみ、クリックした見出しがスライドするようにします。

$(".trigger").click(function() {
    var currentTrigger = $(this);            
    currentTrigger.addClass('current');
    $('.trigger:not(.current)').next(".toggle").slideUp('slow', function(){
        currentTrigger.removeClass('current').next(".toggle").slideToggle("slow");
    });
});​

http://jsfiddle.net/paragnair/CkTRa/392/

于 2012-06-26T11:37:45.843 に答える