0

フライアウト ボックスを作成していますが、問題が発生しています。if / then ステートメントで解決できると思いますが、その方法がわかりません。

クリックするボタンとして設定されている次の 8 つの div があります。

<script>
    $( "#btn1" ).click(function() {
        $( "#one" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn2" ).click(function() {
        $( "#two").toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn3" ).click(function() {
        $( "#three" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn4" ).click(function() {
       $( "#four" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn5" ).click(function() {
        $( "#five" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn6" ).click(function() {
       $( "#six" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn7" ).click(function() {
        $( "#seven" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#eight" ).click(function() {
       $( "#one" ).toggle( "slide", "easeInOutExpo", 100);
    });

</script>

各 div はクリックでうまく機能します。これが私がする必要があることです：

他の div のいずれかが開いている場合は、それらを切り替える必要があります...つまり、3 をクリックしてから 7 をクリックすると、3 が閉じます。

html は次のとおりです。

<div id="transaction">
    <div id="btn1">btn1 </div>
    <div id="btn2">btn1 </div>
    <div id="btn3">btn1 </div>
    <div id="btn4">btn1 </div>
    <div id="btn5">btn1 </div>
    <div id="btn6">btn1 </div>
    <div id="btn7">btn1 </div>
    <div id="btn8">btn1 </div>
</div>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="four">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="five">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="six">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="seven">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="seven">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<script>
$( "#btn1" ).click(function() {
$( "#one" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn2" ).click(function() {
$( "#two").toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn3" ).click(function() {
$( "#three" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn4" ).click(function() {
$( "#four" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn5" ).click(function() {
$( "#five" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn6" ).click(function() {
$( "#six" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn7" ).click(function() {
$( "#seven" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#eight" ).click(function() {
$( "#one" ).toggle( "slide", "easeInOutExpo", 100);
});

</script>
4

2 に答える 2

1

.siblings()これが、クラスとメソッドが存在する理由です。

.data()別のボタンを使用するには、属性と属性の魔法を使用することを好みdata-ます。ボタンの HTML に次のようなものを追加します。

<div class="btn" id="btn1" data-para="one">

そして段落へ：

<p class="para" id="one">Lorem ipsum...</p>

代わりにこの jQuery を使用できます。

$('.btn').on('click',function(e) {
    var id = $(this).data('para');
    $('#'+id).toggle( "slide", "easeInOutExpo", 100).siblings('.para').hide();
});
于 2013-03-27T16:23:22.640 に答える
0

これは、イベント委任の最有力候補のようです: http://learn.jquery.com/events/event-delegation/

.on("click")本質的には、一連のイベントを使用するのではなく、どの要素がクリックされたかを検出できるという考えです。これにより、パフォーマンスが大幅に節約されます。

ここにフィドルがあります：http://jsfiddle.net/jD78j/2/

使用されるコードは次のとおりです。

$(document).on("click","button", function(e) {

    var buttonId = $(e.target).attr("id");
    var nextDiv = $("#" + buttonId).next();

    $("div").slideUp("fast");

    if(nextDiv.is(":visible")) {
        return false;
    } else {
        nextDiv.slideToggle("fast");
    }

});

eventこれにより、ユーザーがさまざまなプロパティを持つオブジェクトでどのボタンをクリックしたかを実際に知ることができるという追加の利点が得られます。

于 2013-03-27T16:17:07.243 に答える