javascript - jQuery SlideUp 而同级 div SlideDown

Question

我需要确保一次只显示一个 .togglecontent div，因此当其中一个向下滑动时，另一个应该向上滑动。

这是我到目前为止所拥有的

(function($) {
    $(document).ready(function() {
        $('.toggler h3').click(function() {
          var currentContent = $(this).siblings('.togglecontent');
          $('.togglecontent').not(currentContent).slideUp();
          currentContent.slideToggle();
        });
    });
})(jQuery);

<小时/>

<div class="toggler-wrap">
  <div class="toggler">
    <h3><span class="fa fa-angle-double-right"></span> What I offer employees</h3>
    <div class="togglecontent">
      I have extensive experience litigating a full range of employment claims:
      <ul>
        <li>discrimination, harassment, retaliation, and wrongful termination</li>
        <li>claims involving disability, religious, and pregnancy accommodations</li>
        <li>California’s complex leave laws</li>
        <li>the California Fair Employment and Housing Act (FEHA)</li>
        <li>the California Family Rights Act (CFRA)</li>
        <li>the Pregnancy Disability Leave Law (PDLL)</li>
        <li>Title VII</li>
        <li>the Family and Medical Leave Act (FMLA)</li>
        <li>the Americans with Disabilities Act (ADA)</li>
        <li>invasion of privacy claims under California law</li>
      </ul>
    </div>
  </div>
  <div class="toggler">
    <h3><span class="fa fa-angle-double-right"></span> Consulting services for business</h3>
    <div class="togglecontent">
      For your business, prevention is the key to successful employment practices. I have years of experience helping businesses comply with federal and California employment laws, as well as those in other states.
      <ul>
        <li>I counsel business on a wide range of policies:
          <ul>
            <li>leaves of absence
              <li>disability accommodation
                <li>hiring and dismissal decisions
                  <li>performance management, policies and handbooks, and
                    <li>background checks.
          </ul>
          <li>I’ve conducted nearly 100 workplace training sessions on a wide range of subjects.
            <li>If a problem arises, I can give you an independent evaluation.
              <li>I’ve also conducted hundreds of workplace investigations.
      </ul>
    </div>
  </div>
</div>

这是一个演示 http://jsfiddle.net/4ae6afmj/

Answer 1

你可以做这样的事情

$('.toggler h3').click(function() {
  var currentContent = $(this).siblings('.togglecontent');
  $('.togglecontent').not(currentContent).slideUp(); // <--- slide up all other .togglecontent except the current one
  currentContent.slideToggle();
});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/4ae6afmj/3/