Javascript 单击“外部”时，下拉列表不隐藏

这是我的剧本。该脚本在我单击时工作，但在我单击外部时不会隐藏

$(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：

<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>

---

那么，像这样的事情

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

---

我认为你走错了方向，有点像重新发明轮子。因此，您想要的行为是拥有一个控件，用户可以从多个不同的语言中选择一种语言？为什么不直接使用Select元素，而不是尝试自己滚动呢？您可以首先使用php设置Select，然后使用javascript/jQuery响应状态更改

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

---

试试看。将其添加到文档就绪调用中。基本上，单击“选择语言”选择器中除此之外的任何位置都会导致“可见语言”的可见性被隐藏。

请编辑您的帖子。你需要在代码前有一个空行。你能告诉我为什么这不起作用吗？应该隐藏什么？你看得见吗？您希望隐藏元素的外部单击的是什么？我想在下拉列表处于非活动状态时隐藏它。您可以发布一些html标记吗？这可能有助于我们识别问题。好的，更新原始答案的代码以隐藏其更改事件的下拉列表。让我们知道这是否对你有效。我意识到你现在在下拉列表中使用的是li和a元素，而不是选择和选项。修改答案，让我们知道这是否对您有效。是的，我使用了li和一个元素。现在我更改脚本。现在它工作正常。