div 显示隐藏

Question

图片描述如图；
点击button。显示list；点击button以外部分，隐藏list。
由于按钮和list不在同一个div，处理比较困难。
求帮助，谢谢各位大虾了
<div class="title">title</div>

<div class="list"> <ul> <li>1</li> <li>2</li> </ul> </div> 图片描述 [1]: /img/bVp2Ge

Answer 1

//使用jquery的话
$('button').click(function(){
    $('.list').show();
    return false;//阻止冒泡  
})

document.click(function(){
    ('.list').hide();  
})

//原生js
var btn=document.getElementsByTagName('button');
var list=document.getElementById('list');
    
btn.addEventListener('click',function(e){
    //这里可以将.list改成id 而不是class 方便获取
    list.style.display=none;
    e.stopPropagation();
})
document.addEventListener('click',function(e){
     list.style.display=block//或者inline-block 看你原来是啥了;
})

Answer 2

就是楼上的思路，但是楼上的原生js太想当然了吧，完全是自己再创造啊.

<button>click</button>
<div></div>

var oDiv=document.querySelector('div'),
    oBtn=document.querySelector('button');

oBtn.addEventListener('click',function(e){
    e.cancelBubble=true;
    oDiv.style.display='block'
},true)

document.addEventListener('click',function(){
    oDiv.style.display='none'
})