javascript - div 显示隐藏

Question

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

<p class="list"> <ul> <li>1</li> <li>2</li> </ul> </p> 图片描述 [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>
<p></p>

var op=document.querySelector('p'),
    oBtn=document.querySelector('button');

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

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