移动端下拉菜单代码

 1     <div class="tab-item popover-outer">
 2         <a href="#" class="popover-toggle">
 3             <span class="icon icon-grid"></span>
 4             <span class="tab-label">商品分类</span>
 5         </a>
 6         <!-- Popver -->
 7         <div id="popover" class="popover">
 8             <ul class="table-view">
 9                 <li class="table-view-cell"><a href="#">全部商品</a></li>
10                 <li class="table-view-cell"><a href="#">水晶</a></li>
11                 <li class="table-view-cell"><a href="#">玛瑙</a></li>
12                 <li class="table-view-cell"><a href="#">砗磲</a></li>
13             </ul>
14         </div>
15         <!-- // Popver -->
16     </div>

 1 //
 2 // Popovers (to be used with popovers.js)
 3 // --------------------------------------------------
 4 .popover-outer {
 5     position: relative;
 6     &.open {
 7         .popover-toggle {
 8             color: #fe7115;
 9             .icon {
10                 background-position-y: -24px;
11             }
12         }
13         .popover {
14             opacity: 1;
15             visibility: visible;
16             @include transform(translate3d(0, 0, 0));
17         }
18     }
19 }
20 .popover {
21     position: absolute;
22     bottom: 55px;
23     left: 50%;
24     z-index: 20;
25     width: 100px;
26     margin-left: -50px;
27     background-color: #fafafa;
28     border-radius: $border-radius;
29     opacity: 0;
30     visibility: hidden;
31     @include box-shadow(0 0 15px rgba(0, 0, 0, .1));
32     @include transform(translate3d(0, 15px, 0));
33     @include transition(all .25s linear);
34 
35   // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
36   &:after {
37     position: absolute;
38     bottom: -8px;
39     left: 50%;
40     width: 0;
41     height: 0;
42     margin-left: -8px;
43     content: '';
44     border-right: 8px solid transparent;
45     border-top: 8px solid #ffffff;
46     border-left: 8px solid transparent;
47   }
48 
49   // Popover transition
50   // --------------------------------------------------
51 
52 
53 
54   // Give correct spacing to the content if there is a bar inside the popover.
55   .bar ~ .table-view {
56     padding-top: $bar-base-height;
57   }
58 }

 1         popover: function(){
 2             var eventName;
 3             /Android|webOS|iphone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?eventName = 'touchstart': eventName = 'click' ;
 4             $('.popover-toggle').on(eventName,function(e){
 5                 e.stopPropagation();
 6                 e.preventDefault();
 7                 var $this = $(this)
 8                     ,$parent = $this.parent();
 9                 if ($parent.hasClass('open')) {
10                     $parent.removeClass('open');
11                 } else {
12                     $parent.addClass('open').siblings('.tab-item').removeClass('open');
13                 }
14             });
15             $('.popover').on(eventName,function(e){
16                 e.stopPropagation();
17             });
18             $('body,html').on(eventName,function(e){
19                 e.stopPropagation();
20                 $('.popover-outer').removeClass('open');
21             });
22         }