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对象点击实际上不知道的好处不同的属性来玩。