单击时选择元素立即关闭答案

【问题标题】：Select element closes immediately when clicked单击时选择元素立即关闭
【发布时间】：2016-09-24 14:53:13
【问题描述】：

我的页面中有几个这样的选择元素

<div class="question_input_type_selector selector_div hide">
    <select class="custom-dropdown input_type_selector">
       <option value="multiple_choice" default="" selected="">Escolha Múltipla</option>
       <option value="scale_input">Escala</option>
       <option value="grid_input">Grelha de escolha múltipla</option>
       <option value="text">Texto</option>
       <option value="checkboxes">Caixas de verificação</option>
    </select>
</div>

如果我不做任何事情，它就会正常工作。但是当我用.hide() 隐藏div 然后用.show() 再次显示它时，所有选择元素都停止正常工作。每次单击其中一个时，它都会立即打开和关闭，并且无法选择选项。保持它打开的唯一方法是单击它，在按住按钮的同时将鼠标拖动到其他地方，然后再松开它。

我已经尝试了所有方法并在 Google 上搜索了几天我能找到的所有方法，但找不到解决方案。感谢您的帮助。

【问题讨论】：

你在多个浏览器上试过了吗？（Chrome、IE、Firefox 等）
显示show/hide 代码。
你可以用.toggle()
它不适用于 Chrome、Firefox 和 Android 版 Chrome。显示/隐藏代码只是： $('.question_div').find('.hide').each(function(){ if(!$(this).find('.hint').val()) { $(this).hide(); } });
什么是.hint？试试$('.question_div').find('.hide').click(function(){ $(this).fadeToggle(); });

标签： javascript jquery html select hide

【解决方案1】：

终于找到了这个问题的原因。

每次我在选择所在的 div 内单击时，我都会调用一个隐藏所有 div 并仅显示单击的 div 的函数。所以，我看不到 div 消失和出现，因为这两个事件是同时发生的，但是在 select 打开后 div 立即消失的事实导致 select 元素立即关闭。

解决方案是添加条件并调用函数以仅在单击的 div 尚未获得焦点时隐藏所有 div。

【讨论】：