Question

这是我的剧本。单击时脚本可以正常工作，但是当我点击外面时它不会被隐藏。

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

Answer 1

我认为你这是错误的做法，有点像重新发明轮子。那么你想要的行为就是拥有一个控件，用户可以从多种语言中选择一种语言？为什么不使用“选择”元素，而不是试图自己滚动？您最初可以使用php设置“选择”，然后使用javascript / jQuery来响应状态更改。

Answer 2

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

试试吧。在您的文档就绪电话中添加它。基本上点击#select_lang选择器之外的任何地方都会导致隐藏#lang_visible的可见性。

Answer 3

那么，那样的话呢？

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

当我点击外面时，下拉不会隐藏

3 个答案: