<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();
})
}