Jquery Slidetoggle open 1 div 다른 닫음

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 : 요소의 컬렉션 slideToggle를 사용

<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

모든 닫힌 사람을 열고 열려있는 모든 사람들을 닫을 예정이다. 클래스를 사용하여 어떤 파일을 열 었는지 추적 한 다음 열거 나 닫히기를 원하는 특정 URL을 밀어 넣는 것이 더 좋은 해결책 일 수 있습니다. 이런 식으로 뭔가 :

$(".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를 사용하려면. 그렇게하면 내가 무슨 일이 일어나는지 구체적으로 알 수 있습니다.