外をクリックするとドロップダウンが表示されない

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を使用し、javascript/jQueryを使用して状態の変化に対応することができます。