美文网首页
zepto实现关于下拉列表点击其他地方隐藏列表

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

作者: 在一颗大大大榕树下 | 来源:发表于2019-05-17 14:58 被阅读0次
      <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();
                    })
                }
    

    相关文章

      网友评论

          本文标题:zepto实现关于下拉列表点击其他地方隐藏列表

          本文链接:https://www.haomeiwen.com/subject/nitmaqtx.html