问如何阻止dropdown在焦点上打开？
EN

Stack Overflow用户

提问于 2020-01-23 19:17:38

回答 1查看 86关注 0票数 0

背景:在撰写本文时，Fomantic-UI是语义-UI的实时开发分支，总有一天会被卷到语义-UI中，同时也是语义-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>

semantic-ui

fomantic-ui

回答 1

Stack Overflow用户

发布于 2020-01-23 19:17:38

答案是dropdown调用上的设置。

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

几乎是按照tin上的说明来做的--当showOnFocus设置为True (默认设置)时，下拉菜单将在获得焦点时打开。如果dropdown是页面上第一个可聚焦的对象，那么它将立即打开。为了避免这种情况，可以像在代码片段中那样主动地将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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59877329

复制

相似问题

问如何阻止dropdown在焦点上打开？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何阻止dropdown在焦点上打开？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何阻止dropdown在焦点上打开？
EN