2

こんにちは 2 つのコンテンツ セクションがあり、一度に 1 つだけ開きたいです。見出しをクリックすると、折りたたんだり開いたりします。私は現在、それらが互いに独立している場所で動作していますが、表示されたときにそれらを非表示にすることを検討しています。jquery アコーディオン用のプラグインを使用する必要はありません。

ここに私が今持っているコードがあります:

HTML:

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer">
   content 2
</div>

JS:

$('#allCatsContainer').css("display", "none");
$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);
        $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");                                                                     
});

どんな助けでも大歓迎です。

ありがとう

4

2 に答える 2

2

これは最近ここで回答されました: What code do i need to collapse a div when another is open?

簡単な方法は、両方を折りたたんでから、必要な方を展開することです。すでに折りたたまれているものは無視されます。

$('yourdivs').click( function() {
    $("yourdivs").slideUp();
    $(this).slideDown();
});

<a>更新: と の間に直接のリンクがないため、上記は彼には機能しません<div>。これは本当に醜いですが、次のように動作しますhttp://jsfiddle.net/mrtsherman/MPwQ8/3/

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);    
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $('#topCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");  
});

これを行うには、もっと良い方法がたくさんあります。私が提供した最初のリンクには例があります。より堅牢なものが必要な場合は、リンクを div に論理的に結び付ける手段を作成する必要があります。

于 2011-03-10T21:35:17.150 に答える
1

スタイリングの頭痛の種に対処する必要がないように、可能な限りHTMLを変更しないようにしました。残念ながら、これはJSが私が望むよりも少しハードコーディングされていることを意味します。

HTML：

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer" class="accordianContent">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer" class="accordianContent">
   content 2
</div>

HTMLは、各コンテンツdivにクラスを追加したことを除いて同じです。

JS：

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a, .allCats h4 a').click(function() {
    var content = $(this).parent().parent().next();

    if(content.is(':visible')) {
        content
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');
    } else  {
        content
            .parent()
            .find('.accordianContent:visible')
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');

        content.slideDown(500).removeClass('closed').addClass('openBox');
    }
});

基本的に、JSはクリックされたリンクに一致するコンテンツを検索します。コンテンツが表示されていた場合は、それ自体が閉じます。表示されていない場合は、表示されている方を閉じて、クリックしたコンテンツを開きます。

openBoxとクラスの両方を切り替えていることに気付いた場合closed、これは冗長になる可能性がありますが、スタイリングがそれに依存しているかどうかはわかりませんでした。

一般に、この機能はさまざまな方法で実行できます。HTMLを少し変更したい場合は、JS側をもう少し見栄えよく見せることができます:)それ以外の場合は、この実装を使用して、スタイリングの問題を回避できます。

于 2011-03-10T23:00:28.560 に答える