Question

我有两个专栏，A＆amp; B. 有些人打开多个B＆＃39。 A将切换它的B项 - 但是点击包含已经打开的B的A开始混淆切换。

我想让每个A打开它的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来点击A列中的项目，让我走上了路径。通过删除slideToggle - 这也意味着点击了一个＆＃39;活跃＆＃39; A没有使其无效或关闭并停用相应的B＆＃39。

所以我使用if statement返回了此功能，该功能会停用A及其B，并关闭这些B＆＃39。

我确定这是一个更优雅的解决方案，但这对我的目的有用。再次感谢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/

jQuery slideToggle重叠div-sets

2 个答案: