여러 개의 jquery 토글 드롭 다운 제어

Question

현재 Im은 동일한 작업을 수행하지만 모두가 더 똑똑하게 작동하도록하는 3 개의 스크립트를 사용합니다. 현재 내가 선택한 경우 페이지의 세 드롭 다운이 동시에 겹쳐서 표시 될 수 있지만 그럴 수는 없습니다. jQuery를 적용하여 드롭 다운이 이미 표시되어 있는지 확인하고, 해당 항목이 있고 다른 항목을 보려면 클릭 한 다음 새 항목을 표시하기 전에 닫으십시오.

<script> 
$(document).ready(
    function() { 
     $(".about").click(function(e) { 
      e.preventDefault(); 
      $(".about-webly").slideToggle('slow'); 
    }); 
}); 

$(document).ready(
    function() { 
     $(".search").click(function(e) { 
      e.preventDefault(); 
      $(".search-webly").slideToggle('slow'); 
      $('.search-box').focus(); 
    }); 
}); 

$(document).ready(
    function() { 
     $(".submission").click(function(e) { 
      e.preventDefault(); 
      $(".submit-webly").slideToggle('slow'); 
    }); 
}); 
</script> 

Answer 1

$(document).ready(function() { 
    $(".about").click(function(e) { 
     e.preventDefault(); 
     $(".search-webly, .submit-webly").hide(); 
     if($(".about-webly").is(":hidden")){ 
      $(".about-webly").slideToggle('slow'); 
     } 
    }); 
    $(".search").click(function(e) { 
     e.preventDefault(); 
     $(".about-webly, .submit-webly").hide(); 
     if($(".search-webly").is(":hidden")){ 
      $(".search-webly").slideToggle('slow'); 
      $('.search-box').focus(); 
     } 
    }); 
    $(".submission").click(function(e) { 
     e.preventDefault(); 
     $(".search-webly, .about-webly").hide(); 
     if($(".submit-webly").is(":hidden")){ 
      $(".submit-webly").slideToggle('slow'); 
     } 
    }); 
}); 

코드는 조금 더 많은 노력을 가하고 단축 할 수있다.