0

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：当页面上的第一个可聚焦对象是下拉列表时，在页面打开时，下拉列表将像单击一样打开。

注意：我第一次在模态情况下发生这种情况并对此感到困惑，认为这是专门针对模态的问题，但此后我在普通页面上遇到了同样的事情。我在下面的片段中使用了一个模态案例来说明，因为 SO 片段查看器不会触发您在普通页面上获得的行为。另一位用户在 FUI 的 git 上提出了这个问题，支持人员指出了我通过这个自我回答的问题在这里分享的答案。

$('.ui.dropdown')
  .dropdown({

  });

$('#b1').on('click', function(e) {

  $('#m1').modal('show')


})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>

    <div class="content">
      <div class='container'>

        <div class="ui floating dropdown labeled search icon button">
          <i class="world icon"></i>
          <span class="text">Select Language</span>
          <div class="menu">
            <div class="item">Arabic</div>
            <div class="item">Chinese</div>
            <div class="item">Danish</div>
            <div class="item">Dutch</div>
            <div class="item">English</div>
            <div class="item">French</div>
            <div class="item">German</div>
            <div class="item">Greek</div>
            <div class="item">Hungarian</div>
            <div class="item">Italian</div>
            <div class="item">Japanese</div>
            <div class="item">Korean</div>
            <div class="item">Lithuanian</div>
            <div class="item">Persian</div>
            <div class="item">Polish</div>
            <div class="item">Portuguese</div>
            <div class="item">Russian</div>
            <div class="item">Spanish</div>
            <div class="item">Swedish</div>
            <div class="item">Turkish</div>
            <div class="item">Vietnamese</div>
          </div>
        </div>
      </div>

      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>
</body>

4

1 回答 1

0

答案是下拉调用的设置。

$('.ui.dropdown').dropdown({
  showOnFocus: false
});

几乎可以做到它在锡上所说的 - 将 showOnFocus 设置为 True （默认设置），下拉菜单将在获得焦点时打开。如果下拉列表是页面上的第一个可聚焦对象，那么它将立即打开。为避免这种情况，请在代码段中主动将 showOnFocus 设置为 False，并且下拉菜单将隐藏其内容，直到用户启动打开过程。

$('.ui.dropdown')
  .dropdown({
    showOnFocus: false
  });

$('#b1').on('click', function(e) {

  $('#m1').modal('show')


})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>

    <div class="content">
      <div class='container'>

        <div class="ui floating dropdown labeled search icon button">
          <i class="world icon"></i>
          <span class="text">Select Language</span>
          <div class="menu">
            <div class="item">Arabic</div>
            <div class="item">Chinese</div>
            <div class="item">Danish</div>
            <div class="item">Dutch</div>
            <div class="item">English</div>
            <div class="item">French</div>
            <div class="item">German</div>
            <div class="item">Greek</div>
            <div class="item">Hungarian</div>
            <div class="item">Italian</div>
            <div class="item">Japanese</div>
            <div class="item">Korean</div>
            <div class="item">Lithuanian</div>
            <div class="item">Persian</div>
            <div class="item">Polish</div>
            <div class="item">Portuguese</div>
            <div class="item">Russian</div>
            <div class="item">Spanish</div>
            <div class="item">Swedish</div>
            <div class="item">Turkish</div>
            <div class="item">Vietnamese</div>
          </div>
        </div>
      </div>

      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>
</body>

于 2020-01-23T11:17:37.900 回答