zepto实现关于下拉列表点击其他地方隐藏列表

  <div class="position-list pure-menu-horizontal pure-u-1-1 ">
                <div class="line"></div>
                <ul class="pure-menu-list pure-u-1-2">
                    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-u-1-1 ">
                        <a href="#" id="menuLink1" class="pure-menu-link">选择服务器</a>
                        <ul id="autolist1" class="pure-menu-children pure-u-1-1" style="display: none;">
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">服务器组1</a></li>
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">服务器组2</a></li>
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">服务器组3</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="pure-menu-list pure-u-1-2" style="margin-left: -3px">
                    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-u-1-1">
                        <a href="#" id="menuLink2" class="pure-menu-link">点位</a>
                        <ul id="autolist2" class="pure-menu-children pure-u-1-1" style="display: none;">
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">点位:12</a></li>
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">点位:11</a></li>
                            <li class="pure-menu-item"><a href="#" class="pure-menu-link">点位:20</a></li>
                        </ul>
                    </li>
                </ul>
        </div>

js

function menuList(i) {
                $(document).on("click",function () {
                    $('#autolist'+i).css('display','none')
                })

                $('#autolist'+i).on('click','li',function () {
                    var selectedText = $(this).find("a").text()
                    console.log('menuList1'+selectedText)
                    $('#menuLink'+i).text(selectedText)
                    $('#autolist'+i).css('display','none')
                    event.stopPropagation();
                })
                $('#menuLink'+i).on('click',function () {
                    if($("#autolist"+i).css('display') == 'none'){
                        $('#autolist'+i).css('display','block')
                    }else{
                        $('#autolist'+i).css('display','none')
                    }
                    event.stopPropagation();
                })
            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容