利用jquery ui实现微信底部的二级下拉菜单

近日在进行一个网站微信网页开发的时候需要实现在微信底部二级下拉菜单，此菜单非微信自定义的二级菜单。由于使用了jquery weui插件，先在上面找，jquery weui中没有现成的组件可以使用。自己开发，想想还是算了，在网上找吧。找到一个使用jquery ui插件的，其自带有menu组件，可以轻松实现二级菜单。引用了jquery ui插件的js，及css文件后写了底部实现的html代码：

<div class="weui_tabbar" id="footer">

        <ul id="menu" style="width:100%;">

            <li>
                <div id="fuwu">服务项目</div>
                <ul>
                    <li><div><a href="/home/CashMarket">资金市场</a></div></li>
                    <li><div><a href="/home/CashAdd">资金发布</a></div></li>
                </ul>
            </li>
            <li><div><a href="/home/Intro">网站介绍</a></div></li>
            <li>
                <div id="lianxi">联系我们</div>
                <ul>
                    <li><div><a href="/home/Contactus">联系方式</a></div></li>
                    <li><div><a href="/home/Register">会员注册</a></div></li>
                    <li><div><a href="/home/Job">网站招聘</a></div></li>
                </ul>
            </li>


        </ul>
    </div>

然后在$(function())中实现

$("#menu").menu()

刷新看效果，先长舒一口气，jquery ui没有和微信开发中已引用的jquery weui插件冲突。但是效果有问题，我这是三个一级菜单项，需要横向平铺到一行，但是jquery ui的默认菜单是竖向排列的。不符合要求，在网上找横向排列的方法。还真找到一个：

.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
 
.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}
但是在css引用中加上后还是不符合要求。虽然横向了，但是没铺满够一行。然后修改css定义后铺满一行了，可是二级菜单弹出却是成了横向排列成一

行，并且不是在菜单栏的上部显示，而是在侧面显示。继续调整，最终成了这样：

.ui-menu {
            width: 33%;
        }

            .ui-menu:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }

            .ui-menu .ui-menu-item {
                display: inline-block;
                float: left;
                margin: 0;
                padding: 0;
                width: auto;
            }

        #menu li {
            width: 33%;
        }

            #menu li ul {
                padding-left: -200px;
            }

                #menu li ul li {
                    width: auto;
                }

这次调整后，解决了一部分问题，但是二级菜单始终是在右侧显示，而不是在点击菜单项的上部显示。调整margin-left,padding-lef,left都不能解决

此问题。后来用微信开发者工具查询元素发现其二级菜单部分的ul每次点击自动生成了style="display: block;top:-29px; left: 124px;"这样的代码。

利用click事件更改这个css的left和top值第一次点击的时候二级菜单出现在右侧，再次点击出现在上部了。利用事件冒泡阻止发觉阻止不了。各种尝试，

历尽艰辛，都不成功。最终在jquery ui的api文档中找到了一个可行的方法。

 $("#menu").menu({
                position: { my: "left top", at: "left top" }
            });
这次可以了。是在点击的菜单项上部显示，但是还有一个问题，就是把点击的菜单项遮盖了。又经过调试修改，最终解决了此问题。代码如下：
$("#menu").menu({
                position: { my: "left top", at: "left top+27" }
            });
解决完问题总结，一个新的插件使用如果baidu和google找不到答案，还是要多看官方的文档，多尝试，只有这样才能解决问题