用bootstrop的dropdown遇到的坑

Posted 2020-08-05 不由分说

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

 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了还是不管用。

　　原因是什么呢？其实是以下原因：

　　

 

　　占位区未显示！

 

 

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

　　嗯，长了记性就行了！