使用Flexbox实现下拉框后，点击分页按钮再点击空白区域，下拉框为何不会收起？

本篇文章向大家介绍《使用Flexbox实现下拉框后，点击分页按钮再点击空白区域，下拉框为何不会收起？ 》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

flexbox使用上的问题

问题描述：

在页面中使用了flexbox实现一个下拉框，当点击下拉框后，下拉框会正常显示。但是，当点击页面上的分页按钮后，鼠标移到其他空白区域并再次点击时，下拉框不会收起。

代码示例：

<div style="float: left;">
  <span class="label w110"><em class="requiredicon">*</em>*****</span>
  &lt;input type=&quot;hidden&quot; name=&quot;xx.dm&quot; id=&quot;dm&quot; value=&quot;${xx.dm}&quot; /&gt;
  &lt;input type=&quot;hidden&quot; name=&quot;xx.mc&quot; id=&quot;mc&quot; value=&quot;${xx.mc}&quot; /&gt;
</div>
<div id="ame" style="display: inline-table; margin-right: 40px;">
  ...
</div>

function fzflexbox(){
    $('#ame').flexbox(cj,{
        inputclass: 'ffb-input required',
        resulttemplate: '<div class="col2" title="{name}">{name}</div>',
        onselect : function() {
            $('#dm').val($('#ame_hidden').val());
            $('#mc').val($('#ame_input').val())
        },
        paging : {
            pagesize : 10,
            summarytemplate : '显示 {start}-{end}  共{total} 结果'
        },
        initialvalue : "${xx.mc}"
    });
    $('#gldcjggajgjgdmname_input').blur(function() {
        $('#mc').val($('#ame_input').val());
    });
}

解决方案：

根据代码示例，可以使用以下方法解决问题：

$('#ame').blur(function() {
  $(this).hide();
});

这个方法会在blur事件（当鼠标移出元素时）触发，隐藏下拉框。

本篇关于《使用Flexbox实现下拉框后，点击分页按钮再点击空白区域，下拉框为何不会收起？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！