Question

我正在建造一个飞出箱子，我遇到了问题。我认为它可以用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>

Answer 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();
});

Answer 2

这似乎是事件授权的主要候选人：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对象点击了哪个按钮。

Jquery - 帮助编写切换按钮？

2 个答案: