jquery - 如何防止在下拉菜单中单击时失去焦点

Question

我有一个 fiddle ，它有一个显示选项卡式表单的下拉列表。

注意:您看不到选项卡，但如果将鼠标悬停在顶部，您会看到有 4 个选项卡。

这个想法是用户可以选择一个选项卡，然后填写表单。

目前，如果您单击一个选项卡，它将失去焦点并且下拉列表消失。如果您再次单击“some title”链接，您会注意到您选择的选项卡已正确选择，但它失去了焦点。

<div class="dropdown">
        <a class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Some title</a>

        <div class="dropdown-menu dropdown-menu-right subscribe-box" aria-labelledby="dropdownMenu1">

          <ul class="nav nav-pills" id="myTab">
            <li class="active"><a href="#" data-target="#mail" data-toggle="tab"><i class="fa fa-envelope-o"></i></a></li>
            <li><a href="#" data-target="#twitter" data-toggle="tab"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" data-target="#sms" data-toggle="tab"><i class="fa fa-commenting"></i></a></li>
            <li><a href="#" data-target="#rss" data-toggle="tab"><i class="fa fa-rss"></i></a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="mail">
              <p>Enter your email address.</p>
              <div class="row">
                <div class="col-sm-8 input-box">
                  <input placeholder="name@email.com" type="text">
                </div>
                <div class="col-sm-4 input-button">
                  <a href="" class="btn">Subscribe</a>
                </div>
              </div>
            </div>

            <div class="tab-pane" id="twitter">
              <p>Enter your twitter username</p>
              <input placeholder="@username" type="text">
            </div>

            <div class="tab-pane" id="sms">
              <p>phone</p>
              <input placeholder="555-123-4567" type="text">
            </div>

            <div class="tab-pane" id="rss">
              <p>rss link</p>
            </div>
          </div>

        </div>
      </div>

    </div>

https://jsfiddle.net/zr6q6bsm/

我需要修改什么，以便当您在下拉列表中选择任何内容时，它不会失去焦点。

Answer 1

我认为这可以帮助你:

将此添加到您的页面

 <script>
   $(document).ready(function(){
      $('#myTab li a').click(function(){
        setTimeout(function(){
          $('.dropdown-menu').show();
        }, 0);
     })
   });
 </script>