输入内容时，按钮调用的下拉列表中的输入表单关闭

Question

我目前正在尝试使用一个简单的输入字段来创建一个下拉菜单。

我的 html:

中有这段代码

<li>
    <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown2'>Teamspeak</a>
    <ul id='dropdown2' class='dropdown-content'>
        <li>
            <input id="username" type="text" class="validate">
        </li>
        <li>
            <a href="ts3server://TEAMSPEAKSERVER/?port=9987">Join</a>
        </li>
    </ul>
</li>

到目前为止它工作正常，看起来我想要它，但是当我尝试在用户名字段中输入内容时，下拉菜单就会关闭。尝试输入内容时如何阻止它关闭？当我点击按钮然后按 Tab 时，我可以毫无问题地输入一些东西，我有点不明白。

此外，任何人都可以告诉我如何将输入输入到下面是 XXX？

<a href="ts3server://TEAMSPEAKSERVER/?port=9987&nickname=XXX">

提前感谢任何可能帮助我的人。

Answer 1

当您单击输入时，事件会传播到父级，这会导致下拉菜单关闭。使用以下 jQuery 代码停止事件传播：

$(document).ready(function(){
    $("#username").click(function(e){
        e.stopPropagation();
    });
});

另请参阅：https://api.jquery.com/event.stoppropagation/

输入内容时，按钮调用的下拉列表中的输入表单关闭

Input form from Dropdown called by Button closes when inputing something

html

javascript

css

materialize