jQuery slideToggle overlapping div-sets

Question

У меня есть две колонки, A & B. Некоторые открытые несколько A B. A будет переключать его в B Items - НО щелкнуть по A, который включает в себя уже открытый B, начинает перемещать переключатель.

Хотелось бы, чтобы каждый A открылся, это B, и если один или несколько из этих B уже открыты, то не выключайте его. Нажатие на A снова закроет соответствующие B.

Я думаю, что я очень близко - я смотрел на этот путь слишком долго:

<style> 
    #aItems li, h3.bTitle{ cursor: pointer;} 

    /* shell - structure */ 
    #wrap { width:870px; margin:0 auto;} 
    #leftcolumn { width: 250px; float: left; margin-right: 30px; } 
    #rightcolumn { width: 590px; float: right;} 

    /* Indicators */ 
    .activeAye{color:blue;} 
    .beeOpen{color:red;} 

    /* Start Hidden */ 
    .bItem { display: none;} 
</style> 
<script> 
    jQuery(document).ready(function($) { 
     /* Column A*/ 
     /* Click Item A -> Expand Relevant B's */ 
     $('.aItem').click(function(){   
      $(this).toggleClass('activeAye'); 
      $('.aItem').not(this).removeClass('activeAye'); 

      /* 
       - This will close all so that each Group Toggle Works 
       - But Breaks the option to close toggled B Group by clicking the opening A 
      */ 
      // $('.bItem').slideUp("fast"); 

      // Define target B's 
      var beeTarget = $(this).data('bdesc'); 

      // Toggle Targets 
      $(beeTarget).slideToggle("medium").prev('h3').toggleClass('beeOpen'); 
     }); 
     /* Column B */ 
     $(".bTitle").click(function(){ 
      // toggle bItem div open/close 
      $(this).next('.bItem').slideToggle("medium"); 
     }); 
    }); 
    </script> 

    <div id="wrap"> 
    <h1>Overlapping Div Sets</h1> 
    <ul> 
     <li>Item in Column A toggle open/close relevant descriptions on the items in column B.</li> 
     <li>Clicking on another Item in A should: 
      <ul> 
       <li>Close non-relevant B Items</li> 
       <li>Keep open any relevant ones</li> 
       <li>Open any that are closed</li> 
      </ul> 
     </li> 
     <li>Clicking any Item in B directly will toggle it open/closed - with no impact to A->B functionality</li> 
    </ul> 
    <div id="leftcolumn"> 
     <h4>Column A</h4> 
      <ul id="aItems"> 
      <li class="aItem ayeOne" data-bdesc=".beeOne"><h3>A One</h3>Toggle B1</li> 
      <li class="aItem ayeTwo" data-bdesc=".beeOne, .beeTwo"><h3>A Two</h3>Toggle B1 and B2</li> 
      <li class="aItem ayeThree" data-bdesc=".beeOne, .beeThree"><h3>A Three</h3>Toggle B1 and B3</li> 
      <li class="aItem ayeFour" data-bdesc=".beeFour"><h3>A Four</h3>Toggle B4</li> 
      <li class="aItem ayeFive" data-bdesc=".beeFive"><h3>A Five</h3>Toggle B5</li> 
      <li class="aItem ayeSix" data-bdesc=".beeSix"><h3>A Six</h3>Toggle B6</li> 
      </ul> 
    </div><!-- /#leftcolumn --> 
    <div id="rightcolumn"> 
     <h4>Column B</h4> 
     <h3 class="bTitle">B One</h3> 
     <div class="bItem beeOne">Nam at tortor in tellus interdum sagittis.</div> 
     <h3 class="bTitle">B Two</h3> 
     <div class="bItem beeTwo">In hac habitasse platea dictumst.</div> 
     <h3 class="bTitle">B Three</h3> 
     <div class="bItem beeThree">Cras dapibus.</div> 
     <h3 class="bTitle">B Four</h3> 
     <div class="bItem beeFour">Suspendisse eu ligula.</div> 
     <h3 class="bTitle">B Five</h3> 
     <div class="bItem beeFive">Sed hendrerit.</div> 
     <h3 class="bTitle">B Six</h3> 
     <div class="bItem beeSix">Aenean imperdiet.</div> 
    </div><!-- /#rightcolumn --> 
    </div><!-- /#wrap --> 

http://jsfiddle.net/dwcouch/6p65ea2g/

Answer 1

Пожалуйста, посмотрите на это:

/* Column A*/ 
 
/* Click Item A -> Expand Relevant B's */ 
 
$('.aItem').click(function(){  
 

 
    $(this).addClass('activeAye'); 
 
    $('.aItem').not(this).removeClass('activeAye'); 
 
    $('.bItem').prev('h3').removeClass('beeOpen'); 
 
    /* 
 
       - This will close all so that each Group Toggle Works 
 
       - But Breaks the option to close toggled B Group by clicking the opening A 
 
      */ 
 
    // $('.bItem').slideUp("fast"); 
 

 
    // Define target B's 
 
    var beeTarget = $(this).data('bdesc'); 
 
    $('.bItem').not($(beeTarget)).slideUp(); 
 
    // Toggle Targets 
 
    $(beeTarget).slideDown("medium").prev('h3').addClass('beeOpen'); 
 

 
}); 
 
/* Column B */ 
 
$(".bTitle").click(function(){ 
 
    // toggle bItem div open/close 
 
    $(this).next('.bItem').slideToggle("medium"); 
 
});

http://jsfiddle.net/6p65ea2g/1/

Answer 2

PaperTank поставил меня на путь, беря JQuery slideToggle из логики для щелкать на элементах в колонке А. Удалив slideToggle - это также означает, что при нажатии на «активный» А не сделать его неактивным или закрыть и деактивировать соответствующие B.

Итак, я вернул эту функциональность с if statement, который дезактивирует A и его B и закрывает эти B.

Я уверен, что есть более элегантное решение, но это будет работать для моих целей. Еще раз спасибо PaperTank.

/* Column A*/ 
    /* Click Item A -> Expand Relevant B's */ 
    $('.aItem').click(function(){ 
     var beeTarget = $(this).data('bdesc'); 

     // If A is active, close it's B's and remove active class on A & it's B's 
     if($(this).hasClass('activeAye')){ 
      $(beeTarget).slideUp("medium").prev('h3').removeClass('beeOpen'); 
      $(this).removeClass('activeAye'); 
     }else{ 
     // if A is not active: 
      // add active class, remove it from others 
      $(this).addClass('activeAye'); 
      $('.aItem').not(this).removeClass('activeAye'); 

      // remove active class from all B's and close them 
      $('.bItem').prev('h3').removeClass('beeOpen'); 
      $('.bItem').not($(beeTarget)).slideUp(); 

      // Open A's targets and add active class 
      $(beeTarget).slideDown("medium").prev('h3').addClass('beeOpen'); 
     } 
    }); 

    /* Column B */ 
    $(".bTitle").click(function(){ 
     // toggle bItem div open/close 
     $(this).next('.bItem').slideToggle("medium"); 
    }); 

http://jsfiddle.net/dwcouch/bzum70L4/