Jquery - 幫助寫入切換按鈕？

Question

我正在構建一個飛出框並出現問題。我認爲這可以通過if/then聲明來解決，但不知道如何去做。

我有以下8個divs被設置爲按鈕來點擊。

<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對象點擊實際上不知道的好處不同的屬性來玩。