jquery slidetoggle打开1格，并关闭另一个

Question

我想关闭一个div时点击另一个div。目前，它一次打开多个div。

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> 

Answer 1

找到我的解决方案！

$(".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;  
}); 

Answer 2

上元素的集合使用的slideToggle是要打开所有封闭的人，并关闭所有打开的。使用一个类来跟踪哪一个被打开，然后只滑动你想要打开和关闭的特定的ul可能是一个更好的解决方案。就像这样：

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

就我个人而言，我喜欢使用slideUp和slideDown而不是slideToggle。这样我就知道具体发生了什么。