6

我正在使用下面的代码，它是 Bootstrap 框架的一部分。

我的目标是如果<a>name</a>通过 Jquery 的单击/聚焦功能单击来聚焦输入。我已经知道它关于链接data-toggle="dropdown"中的属性a使它不起作用。我真的没有经验。希望有人对我有帮助！

<html>
<body>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form ...>                                      
<input type="text" id="4711" /> 
</form>
</li>
</ul>
</li>
</body>
</html>



<script>
$('#dLabel').click(function() {
  $('#4711').focus();
});
</script>
4

3 回答 3

5

您应该将代码放入文档就绪处理程序中：

{对于引导程序，您可以使用超时作为一种简单的解决方法}

看演示

$(function () {
    $('#dLabel').click(function () {
        setTimeout(function(){$('#login').focus();},0);
    });
    $('.dropdown input[type=text]').click(function(e){
        e.stopPropagation();
    });
});
于 2013-05-13T15:03:23.250 回答
0

一种解决方法是使用带有 for 属性的标签元素而不是元素。

...
  <li class="dropdown">
    <label for="4711" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown">
    <i class="icon-user"></i> name </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>
      <form ...>                                      
        <input type="text" id="4711" /> 
      </form>
      </li>
    </ul>
  </li>
...
于 2014-03-31T16:46:27.877 回答
0

如果您无法使用标签并想使用链接，那么您实际上可以观察下拉菜单引发的事件并以这种方式处理。您可以在以下位置查看所有事件：https ://getbootstrap.com/docs/4.0/components/dropdowns/#events

对于这种情况，您需要使用 shown.bs.dropdown 事件，以便您的代码如下所示：

<html>
    <body>
        <li id="dropdownParent" class="dropdown">
            <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li>
                    <form ...>
                        <input type="text" id="4711" />
                    </form>
                </li>
            </ul>
        </li>
    </body>
</html>

<script>
  $('#dropdownParent').on('shown.bs.dropdown', function() {
    $('#4711').focus();
  });
</script>
于 2019-08-26T14:11:29.840 回答