用bootstrop的dropdown遇到的坑

Posted 不由分说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用bootstrop的dropdown遇到的坑相关的知识,希望对你有一定的参考价值。

先上一下自己写的源代码:

 1 <div class="form-group amount">
 2                     <label for="amount" class=" control-label">充值金额</label>
 3                     <input type="text" class="form-control" id="amount" placeholder="">
 4                     <span class="tips">1RMB=1鱼币</span>
 5                     <p class="msg-error">错误信息</p>
 6                     <div class="dropdown">
 7                         <span class="arrow" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
 8                         <div class="dropdown-menu">
 9                             <ul>
10                                 <li>1RMB</li>
11                                 <li>5RMB</li>
12                                 <li>10RMB</li>
13                                 <li>20RMB</li>
14                                 <li>50RMB</li>
15                                 <li>100RMB</li>
16                                 <li>200RMB</li>
17                                 <li>500RMB</li>
18                                 <li>1000RMB</li>
19                             </ul>
20                         </div>
21                     </div>
22                 </div>

 根据效果图,应该点击.arrow让dropdown显示出来,所以就如上部局了。

 

坑一:用js来手动调出dropdown;

  我想的是当点击到input上时,就应该显示出dropdown,这样才更符合人的体验嘛,所以我就把focus事件往input上加,想让它focus时显示出来。结果,就是怎样都出不来。

  官网示例的调用方法是这样的:

$(‘.dropdown-toggle‘).dropdown()

  于是我也这样来调,可dropdown一直都无动于衷,看来是我的选择器有了问题,然后我就开始了各种尝试,比如这样:

$(‘.amount ‘).dropdown()

//这样……
$(‘.amount .dropdown‘).dropdown()

//这样……
$(‘.amount .dropdown-menu‘).dropdown()

  结果就是不行嘛,最后,我发现正确的应该是这样的:

$(‘.amount .dropdown-toggle‘).dropdown(‘toggle‘)

  当然,前提是把.arrow的class身上再加上.dropdown-toggle的class。就是这样:

<span class="arrow dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>

 

  没人跟我说过.dropdown-toggle是必须的啊!! 好吧,是我学习的时候不认真,使用的时候太粗心!
  

坑二、focus事件时dropdown闪显闪退;

  具体的病症应该时focus事件的mousedown会显示,当mouseup会消失,这是什么道理?冒泡?默认行为?加上了preventdefault和stoppropagation不管用,我都return false了还是不管用。

  原因是什么呢?其实是以下原因:

  

 

  占位区未显示!

 

 

  恩,说完原因,其实这种问题,完全是可以通过布局来避免的啊!再回头看看文章顶部贴出来的代码,不觉得这代码有点扭曲吗?下次再碰到这样的需求,还会如此来布局吗?

  嗯,长了记性就行了!

 

以上是关于用bootstrop的dropdown遇到的坑的主要内容,如果未能解决你的问题,请参考以下文章

python appium server代码调起和关闭遇到的坑

Unity 使用xLua遇到的坑

关于MUI集成微信分享遇到的坑

bootstrop

bootstrop

bootstrop设置背景图片自适应屏幕