Question

这是下拉列表中的表单，应关闭此下拉列表

<div id="kupit" >
    <div class="uk-width-1-1 uk-button-dropdown drop"
         data-uk-dropdown="{pos: 'left-center', mode:'click'}">
        <button href="#" class="uk-button uk-button-primary tm-add-to-cart uk-margin-top uk-width-1-1">Купить в один клик</button>

        <div class="uk-dropdown uk-dropdown-small">
            <p>ПОЖАЛУЙСТА, ОСТАВЬТЕ <br> СВОЙ НОМЕР ТЕЛЕФОНА.</p>
            <p>НАШИ СОТРУДНИКИ СВЯЖУТСЯ<br> С ВАМИ В БЛИЖАЙШЕЕ ВРЕМЯ.</p>
            <form class="uk-form" action="/" method="post">


                <div class="uk-form-row">
                    <input class="uk-width-1-1" name="username" size="18" placeholder="Имя"
                           type="text">
                </div>

                <div class="uk-form-row">
                    <input class="uk-width-1-1" name="phone" size="18" placeholder="Телефон"
                           type="text">
                </div>
                <div class="uk-form-row">
                    <button class="uk-button uk-button-primary uk-width-1-1" value="Войти" name="Submit" type="submit" onclick="popup(this); return false;">ЗАКАЗАТЬ ТОВАР</button>
                </div>

            </form>
        </div>
    </div>
</div>

以下是关闭下拉列表的代码

function popup(here) {
    var test = jQuery(here).closest('.drop');
    UIkit.dropdown(test).hide();
}

但是当我点击按钮下拉隐藏然后立即再次显示时。

Answer 1

这是因为你的鼠标仍然在下拉列表上。系统再次显示窗口，因为鼠标仍在那里。因此，如果您需要通过此按钮关闭此下拉列表，则需要将uk-dropdown-close类添加到此按钮。

此外，您可以使用此代码在下拉列表关闭时添加一些功能

jQuery('[data-uk-dropdown]').on('beforehide.uk.dropdown', function () {
// custom code here 
})

如果通过javascript隐藏它，UIkit下拉隐藏并再次出现

1 个答案: