如何解决如何在uikit uk-dropdown中使用select2?
当我在uk-dropdown Uikit中使用select2下拉菜单并选择了一个选项时,它会自动关闭模态。
这是codepen:Codepen
// In your JavaScript code (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-dropdown="mode:click">
sfsdf
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using 'Content here,content here',making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,sometimes by accident,sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
解决方法
发生此问题是因为uikit倾向于从uikit之外的其他元素中窃取焦点。由于默认情况下,Select2将下拉菜单附加到元素,因此将其视为“ uikit的外部”。
为避免此问题,您可以使用dropdownParent设置将下拉列表附加到uikit本身:
$(document).ready(function() {
$(".js-example-basic-single").select2({
dropdownParent: $("#placeholder")
});
});
工作代码段:
$(document).ready(function() {
$(".js-example-basic-single").select2({
dropdownParent: $("#placeholder")
});
});
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<button class="uk-button uk-button-default" type="button">Click</button>
<div id="placeholder" uk-dropdown="mode:click">
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using 'Content here,content here',making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,sometimes by accident,sometimes on purpose (injected humour and the like).
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。