0

ねえ、私は動的なslideToggle関数を介して表示されるいくつかの隠されたdivを持っています。すべてがうまく機能しますが、他のリンクをクリックするとdivが表示されたままになります。一度に1つのdivを表示したいのですが。クリックすると他のユーザーが非表示になり、新しいユーザーが表示されます。私は完全な機能を正しく得ることができないようです！

お時間をいただきありがとうございます！大変感謝しております。ここにただのリルベイビー。

HTML：

    <div id="nav">
        <div class="menu"><a id="show_work">WORK</a></div>
            <div id="work" class="sub">
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_biography">BIO</a></div>
            <div id="biography" class="sub" >
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_contact">CONTACT</a></div>
            <div id="contact" class="sub">
                <p>hidden content</p>
            </div>
     </div>

動作するがそれらをすべて開いたままにするJavascript：

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).next().slideToggle(400);
    return false;
}).next().hide();

私が欲しいものの壊れた概念的なJavascript：

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).slideToggle(400);
    $('.sub not:(this)').slideUp(400);
});
return false;
});.next().hide();
4

3 に答える 3

1

クリックするとすべてのdivを非表示にする関数を作成します。

function hideDivs() {
  $(".menu div").hide();
}

次に、クリックは次のようになります。

$('#show_work').click(function() {
    hideDivs();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    hideDivs();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    hideDivs();
    $('#contact').slideToggle(400);
});

これは、どのリンクがクリックされたかに関係なく、すべてのdivを非表示にすることで機能します。非ターゲットdivを手動で非表示にすることもできますが（以下に表示）、すべてを非表示にすることは良いアプローチだと思います。

別の方法（醜くて保守性が低い-「showdiv」がすでに表示されている場合は、slideToggle呼び出しをスキップするロジックも必要です）：

$('#show_work').click(function() {
    $('#show_biography, #show_contact').hide();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    $('#show_work, #show_contact').hide();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    $('#show_work, #show_biography').hide();
    $('#contact').slideToggle(400);
});
于 2011-04-05T22:22:45.647 に答える
0

jQuery UIのアコーディオンコントロールは、探していることを実行するようです。

于 2011-04-05T23:06:19.943 に答える
0

これはあなたが探しているものですか？

$('.sub').hide();
$('#nav .menu').click(function() {
    $('.sub:visible').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400);
    return false;
});

これが機能するのを見るフィドルです。

于 2011-04-06T16:53:06.070 に答える