美文网首页
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