移动端下拉菜单代码

    <div class="tab-item popover-outer">
        <a href="#" class="popover-toggle">
            <span class="icon icon-grid"></span>
            <span class="tab-label">商品分类</span>
        </a>
        <!-- Popver -->
        <div id="popover" class="popover">
            <ul class="table-view">
                <li class="table-view-cell"><a href="#">全部商品</a></li>
                <li class="table-view-cell"><a href="#">水晶</a></li>
                <li class="table-view-cell"><a href="#">玛瑙</a></li>
                <li class="table-view-cell"><a href="#">砗磲</a></li>
            </ul>
        </div>
        <!-- // Popver -->
    </div>

//
// Popovers (to be used with popovers.js)
// --------------------------------------------------
.popover-outer {
    position: relative;
    &.open {
        .popover-toggle {
            color: #fe7115;
            .icon {
                background-position-y: -24px;
            }
        }
        .popover {
            opacity: 1;
            visibility: visible;
            @include transform(translate3d(0, 0, 0));
        }
    }
}
.popover {
    position: absolute;
    bottom: 55px;
    left: 50%;
    z-index: 20;
    width: 100px;
    margin-left: -50px;
    background-color: #fafafa;
    border-radius: $border-radius;
    opacity: 0;
    visibility: hidden;
    @include box-shadow(0 0 15px rgba(0, 0, 0, .1));
    @include transform(translate3d(0, 15px, 0));
    @include transition(all .25s linear);

  // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
  &:after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: '';
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    border-left: 8px solid transparent;
  }

  // Popover transition
  // --------------------------------------------------



  // Give correct spacing to the content if there is a bar inside the popover.
  .bar ~ .table-view {
    padding-top: $bar-base-height;
  }
}

        popover: function(){
            var eventName;
            /Android|webOS|iphone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?eventName = 'touchstart': eventName = 'click' ;
            $('.popover-toggle').on(eventName,function(e){
                e.stopPropagation();
                e.preventDefault();
                var $this = $(this)
                    ,$parent = $this.parent();
                if ($parent.hasClass('open')) {
                    $parent.removeClass('open');
                } else {
                    $parent.addClass('open').siblings('.tab-item').removeClass('open');
                }
            });
            $('.popover').on(eventName,function(e){
                e.stopPropagation();
            });
            $('body,html').on(eventName,function(e){
                e.stopPropagation();
                $('.popover-outer').removeClass('open');
            });
        }