JavaScript弹出窗口没有'；关不上

我正在为一个网站做一个职业页面，页面上会列出职位空缺，当你点击它时，会弹出职位描述，问题是我希望它在你点击其他地方时关闭。我得到了第一个这样做的项目，但其余的不会

<div class="joblisting">

    <a href="#" class="contact" id="job_id">
        <div class="messagepop pop"  id="menucontainer">
            job_description
        </div>
        <p>click to read description...</p>
    </a>

</div>

---

：在JSFIDLE上。

您有两个id相同的元素。请改用类

$(document).click(function(event) { 

    if($('.messagepop').is(":visible")) {
        $('.messagepop').hide()
    } 
});

---

单击任意位置隐藏弹出元素，并使用

stopPropagation（）

排除元素本身

var popup = documrnt.getElementById("popup_id");

document.addEventListener("click", function(){
    popup.style.display = "none"
}, false);

popup.addEventListener("click", function(e){
    e.stopPropagation();
});