多个jQuery Toggles，遍历许多模板化元素之一？

Question

我想在某些jQuery事件（.change，.click，.mouseenter和.mouseleave）中出现一些隐藏的元素。所有元素都是从模板中重复出来的，因此jQuery事件只需遍历相应的元素。

感谢@ ArunPJohny的answer，这是当前工作版的一个小提琴：http://jsfiddle.net/n6yq6/7/

这是一个概述理想设置的小提琴（尚未奏效）：http://jsfiddle.net/qp477/7/

理想的HTML（显示模板）：

{{#each story)
<div class="Div1-1"><div class="Div1-2">
  <div class="Div2-1"><div class="Div2-2">2</div></div>
  <div class="Div3-1"><div class="Div3-2">3</div></div>
  <div class="Div4-1" style="display:none;">
    <div class="Div4-2-1"><div class="Div4-2-2">4</div></div>
    <div class="Div4-3-1"><div class="replyForm"><input type="text" /></div></div>
  </div>
  <div class="Div5-1" style="display:none;"><div class="Div5-2"><input type="text" /></div></div>
  <div class="btnsContainer" style="display:none;">
      <div class="btn-group" data-toggle="buttons">
          <label class="btn btn1"><input type="checkbox" class="theBtn1"/>b1</label>
          <label class="btn btn2"><input type="checkbox" class="theBtn2"/>b2</label>
          <label class="btn btn3"><input type="checkbox" class="theBtn3"/>b3</label>
      </div>
  </div>
</div></div>

<div>
    <div class="DivA" style="display:none;">A</div>
    <div class="DivB" style="display:none;">B</div>
    <div class="DivC" style="display:none;">C</div>
</div>
{{/each}}

理想jQuery的概要（尚未开始工作）：

// something to slideToggle Div5-1 & btnsContainer on mouseenter of Div1-1
$(document).on("mouseenter", ".Div1-1", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $nxt.children('.Div5-1').stop().slideToggle().toggleClass("active");;
    $nxt.children('.btnsContainer').stop().slideToggle().toggleClass("active");;
});
// something to slideUp Div5-1 & btnsContainer on mouseleave of Div1-1
$(document).on("mouseleave", ".Div1-1", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $nxt.children('.Div5-1').stop().slideUp().toggleClass("active");;
    $nxt.children('.btnsContainer').stop().slideUp().toggleClass("active");;
});

// something to slideToggle Div4-1 on click of Div3-1, and when visible slideUp Div4-1 on click of Div3-1
$(document).on("click", ".Div3-1", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $nxt.children('.Div4-1').stop().slideToggle().toggleClass("active");;
});

// toggle DivA on change of theBtn1, remove .active from theBtn2+theBtn3, and slideUp DivB+DivC (if open)
$(document).on("change", ".theBtn1", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $(".btn2").removeClass("active");
    $(".btn3").removeClass("active");
    $nxt.children().not('.DivA').stop().slideUp().removeClass("active");;
    $nxt.children('.DivA').stop().slideToggle().toggleClass("active");;
});
// toggle DivB on change of theBtn2, remove .active from theBtn1+theBtn3, and slideUp DivA+DivC (if open)
$(document).on("change", ".theBtn2", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $(".btn1").removeClass("active");
    $(".btn3").removeClass("active");
    $nxt.children().not('.DivB').stop().slideUp().removeClass("active");;
    $nxt.children('.DivB').stop().slideToggle().toggleClass("active");;
});
// toggle DivC on change of theBtn3, remove .active from theBtn1+theBtn2, and slideUp DivA+DivB (if open)
$(document).on("change", ".theBtn3", function () {
    var $nxt = $(this).closest('.Div1-1').next();
    $(".btn1").removeClass("active");
    $(".btn2").removeClass("active");
    $nxt.children().not('.DivC').stop().slideUp().removeClass("active");;
    $nxt.children('.DivC').stop().slideToggle().toggleClass("active");;
});