Jquery Slidetoggle open 1 div and close another_问答_开发者

I'm trying to close one div when clicking on another div . Currently, it opens multiple divs at one time.

JQUERY:

$(document).ready(function() {

    $(".dropdown dt a").click(function() {
        var dropID = $(this).closest("dl").attr("id");
        $("#"+dropID+" dd ul").slideToggle(200);
        return false; 
    });

    $(".dropdown dd ul li a").click(function() {
        var dropID = $(this).closest("dl").attr("id");
        var text = $(this).html();
        var selVal = $(this).find(".dropdown_value").html();
        $("#"+dropID+" dt a").html(text);
        $("#"+dropID+" dd ul").hide();
        return false; 
    });

    $("dl[class!=dropdown]").click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    });


    $("id!=quotetoolContainer").click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    }); 

    $('body').click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    }); 

    $('.productSelection').children().hover(function() {
        $(this).siblings().stop().fadeTo(200,0.5);
    }, function() {
        $(this).siblings().stop().fadeTo(200,1);
    });

});

HTML:

<div id="quotetoolContainer">
  <div class="top"></div>
  <div id="quotetool">
    <h2>Instant Price Calculator</h2>
    <p>Document Type</p>
    <dl id="docType" class="dropdown">
      <dt><a href="#"><span>Select a Document Type</span></a></dt>
      <dd>
        <ul>
          <li><a href="#" id="1">Datasheets<span class="value">Datasheets</span></a></li>
          <li><a href="#">Manuals<span class="value">Manuals</span></a></li>
          <li><a href="#">Brochures<span class="value">Brochures</span></a></li>
          <li><a href="#">Newsletters<span class="value">Newsletters</span></a></li>
          <li><a href="#">Booklets<span class="value">Booklets</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Flat Size</p>
    <dl id="flatSize" class="dropdown">
      <dt><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></li>
          <li><a href="#">11" x 17"<span class="value">11" x 17"</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Full Color or Black &amp; White?</p>
    <dl id="color" class="dropdown">
      <dt><a href="#">Full Color<span class="value">Full Color</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Full Color<span class="value">Full Color</span></a></li>
          <li><a href="#">Black &amp; White<span class="value">Black &amp; White</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Paper</p>
    <dl id="paper" class="dropdown">
      <dt><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></li>
          <li><a href="#">Premium White Paper (28 lb.)<span class="value">Premium White Paper (28 lb.)</span></a></li>
          <li><a href="#">Glossy White Text (80 lb.) - Recycled<span class="value">Glossy White Text (80 lb.) - Recycled</span></a></li>
          <li><a href="#">Glossy White Cover (80 lb.) - Recycled<span class="value">Glossy White Cover (80 lb.) - Recycled</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Folding</p>
    <dl id="folding" class="dropdown">
      <dt><a href="#">Fold in Half<span class="value">Fold in Half</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Fold in Half<span class="value">Fold in Half</span></a></li>
          <li><a href="#">Tri-Fold<span class="value">Tri-Fold</span></a></li>
       开发者_开发技巧   <li><a href="#">Z-Fold<span class="value">Z-Fold</span></a></li>
          <li><a href="#">Double-Parallel Fold<span class="value">Double-Parallel Fold</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Three-Hole Drill</p>
    <dl id="drill" class="dropdown">
      <dt><a href="#">No<span class="value">No</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">No<span class="value">No</span></a></li>
          <li><a href="#">Yes<span class="value">Yes</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Qty</p>
    <dl id="quantity" class="dropdown">
      <dt><a href="#">50<span class="value">50</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">50<span class="value">50</span></a></li>
          <li><a href="#">100<span class="value">100</span></a></li>
          <li><a href="#">150<span class="value">150</span></a></li>
          <li><a href="#">200<span class="value">200</span></a></li>
          <li><a href="#">250<span class="value">250</span></a></li>
          <li><a href="#">500<span class="value">500</span></a></li>
          <li><a href="#">750<span class="value">750</span></a></li>
          <li><a href="#">1,000<span class="value">1,000</span></a></li>
          <li><a href="#">1,500<span class="value">1,500</span></a></li>
          <li><a href="#">2,000<span class="value">2,000</span></a></li>
          <li><a href="#">2,500<span class="value">2,500</span></a></li>
          <li><a href="#">3,000<span class="value">3,000</span></a></li>
          <li><a href="#">3,500<span class="value">3,500</span></a></li>
          <li><a href="#">4,000<span class="value">4,000</span></a></li>
          <li><a href="#">4,500<span class="value">4,500</span></a></li>
          <li><a href="#">5,000<span class="value">5,000</span></a></li>
          <li><a href="#">5,500<span class="value">5,500</span></a></li>
          <li><a href="#">6,000<span class="value">6,000</span></a></li>
          <li><a href="#">6,500<span class="value">6,500</span></a></li>
          <li><a href="#">7,000<span class="value">7,000</span></a></li>
          <li><a href="#">7,500<span class="value">7,500</span></a></li>
          <li><a href="#">8,000<span class="value">8,000</span></a></li>
          <li><a href="#">8,500<span class="value">8,500</span></a></li>
          <li><a href="#">9,000<span class="value">9,000</span></a></li>
          <li><a href="#">9,500<span class="value">9,500</span></a></li>
          <li><a href="#">10,000<span class="value">10,000</span></a></li>
          <li><a href="#">12,500<span class="value">12,500</span></a></li>
          <li><a href="#">15,000<span class="value">15,000</span></a></li>
          <li><a href="#">17,500<span class="value">17,500</span></a></li>
          <li><a href="#">20,000<span class="value">20,000</span></a></li>
        </ul>
      </dd>
    </dl>
    <div id="priceTotal">
      <div class="priceText">Your Price:</div>
      <div class="price">$29.00</div>
      <div class="clear"></div>
    </div>
    <div id="buttonQuoteStart"><a href="#" title="Start Printing">Start Printing</a></div>
  </div>
  <div class="bottom"></div>
</div>

Found my solution!

$(".dropdown dt a").click(function() {
  var dropID = $(this).closest("dl").attr("id");

  if ($("#"+dropID+" dd ul.opened").length) { 
    $('ul.opened').slideToggle(200).removeClass('opened');
  } else {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $("#"+dropID+" dd ul").slideToggle(200).addClass('opened');
  }
  return false;     
});

Using slideToggle on a collection of elements is going to open all the closed ones and close all the open ones. Using a class to track which one's opened, and then only sliding the specific ul's that you want opened and closed is probably a better solution. Something like this:

$(".dropdown dt a").click(function() {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $(this).closest("dl").find("dd ul").slideToggle(200).addClass('opened');
    return false; 
});

Personally, I like to use slideUp and slideDown rather than slideToggle. That way I know specifically what's going on.