0

リストの要素を表示/非表示にするために .click で slideToggle をトリガーするメニューがあります。

ページが最初に読み込まれると、リストのすべての要素が表示されます。リスト内のさまざまな要素に対応するメニューをクリックすると、さまざまな部分がスライドします。メニューは次のようになります。

One | Two | Three

リストは次のようになります。

<li class="one">Here's one thing</li>
<li class="two">Here's another thing</li>
<li class="three">Here's a third thing</li>

ONE をクリックすると、2 と 3 が上にスライドし、.one の項目だけが表示されます。それは起こります。ONE をもう一度クリックすると、2 と 3 が下にスライドして、すべてが再び表示されます。その通りです。

ただし、ONE をクリックしてリストを展開せず、代わりに TWO にジャンプすると、事態は奇妙になります。期待されるアクションは、.one と .三。代わりに、THREE をクリックすると .three のみが表示され、.one と .two が表示され、.three が非表示になります。

それは混乱です。これが私が今これらをどのように呼んでいるのかです：

$('#clickone').click(function(){
$('#result li:not(.one)').slideToggle();});

$('#clicktwo').click(function(){
$('#result li:not(.two)').slideToggle();});

$('#clickthree').click(function(){
$('#result li:not(.three)').slideToggle();});

単純に機能する方法が必要ですよね？

4

2 に答える 2

1 
var ooxx = {
    '#clickone' : '.one',
    '#clicktwo' : '.two',
    '#clickthree' : '.three'
},
$.each(ooxx, function(i, n) {
    $(i).click(function() {
        $(n).siblings().slideToggle();
    });
});

こんな感じだと思います。希望があなたを助けることができます:)

于 2010-09-15T04:34:22.977 に答える
1 
$('#clickone').click(function() {
    var li = $('#result li.one').slideDown().siblings();
    toggler(li);
});

$('#clicktwo').click(function() {
    var li = $('#result li.two').slideDown().siblings();
    toggler(li);
});

$('#clickthree').click(function() {
    var li = $('#result li.three').slideDown().siblings();
    toggler(li);
});

function toggler(el) {
    if (el.is(':visible')) el.slideUp();
    else el.slideDown();

}​
于 2010-09-15T06:52:41.997 に答える