내가 밖에 클릭하면 드롭 다운이 숨겨지지 않습니다.

Question

이것은 내 스크립트입니다. 스크립트는 클릭 할 때 작동하지만 바깥 쪽을 클릭하면 숨겨지지 않습니다. 그래서

<li> 
    <div class="clsCurrent_Lan "> 
     <a class="clsHead_Link_Bg" href="#" id="select_lang"> 
      <span>Select Language</span> 
     </a> 
    </div> 
    <ul id="lang_visible" > 
     <?php foreach($language_drops as $lang){?> 
      <li> 
       <a href="<?php echo admin_url('home/ch_language/' . 
       $lang->language_code)?>" 
       id="<?php echo $lang->language_code?>"> 
       <?php echo ucfirst($lang->language_name);?></a> 
      </li> 
     <?php }?> 
    </ul> 
</li> 

Answer 1

$(document).mouseup(function(e) { 
    if ($(e.target).parents('#select_lang').length === 0) { 
    $("#lang_visible").attr('style', 'visibility: hidden'); 
    } 
}); 

시도해보십시오. 문서 준비 호출 내에서 추가하십시오. 기본적으로 #select_lang 선택자 외에 아무 곳이나 클릭하면 #lang_visible의 표시가 숨겨집니다.

Answer 2

다음이 같은 :

$(document).ready(function() { 
    //Translate(); //caling Language Translater function 
    $("#translate_image").attr('href', base_url) 

    $("#select_lang").click(function() { 
     $("#lang_visible").attr('style', 'visibility: visible'); 
    }) 
}) 

여기 내 HTML입니까?

$(document).ready(function() { 
    //Translate(); //calling Language Translater function 
    $("#translate_image").attr('href',base_url); 
    $("#select_lang").click(function() { 
     $("#lang_visible").attr('style','visibility: visible').click(function (e) { 
      $(this).hide(); //hides the #lang_visible element 
      //$(this).parent().hide(); //to hide the <li> containing the #lang_visible element 
      e.preventDefault(); 
      return false; 
     }); 
    }); 
}); 

Answer 3

나는 당신이 바퀴를 재발 명하는 것과 같은 잘못된 길로 가고 있다고 생각합니다. 따라서 사용자가 원하는 언어로 다양한 언어로 언어를 선택할 수 있습니다. 스스로 선택하기보다는 "선택"요소를 사용하는 것이 어떻습니까? PHP를 사용하여 처음에는 "Select"를 설정 한 다음 javascript/jQuery를 사용하여 상태 변경에 응답 할 수 있습니다.