无法在onclick事件中的特定情况下操作jQuery

我有一种情况，当我点击里程碑链接时，它会取消隐藏一个下拉div，其中里程碑作为标题

我的要求是，当我在div中单击任何不应该隐藏的地方时。当我只在该div外单击时，它应该被隐藏。 当前的问题是，当我在div中单击时，它会被隐藏。 这里是图片的链接，仅供参考。

$（“#头项”）。在（{//头中的任务列表
焦点：函数（）{
$（'#mileheader'）.attr（“class”，”）；
}, 
模糊：函数（）{
$（“#牛奶头”）。单击（函数（e）{
如果（e.target.id=='mileheader'）{
$（#mileheader”）.attr（“class”）；
}否则{
$（“牛奶头”）.attr（“类”、“隐藏”）；
}
});

不要认为这个答案是完美的，只是想找到一个快速的解决方案


资源：

同样，我不使用.attr来尝试删除单个类，因为它将删除该元素上的所有类。
添加html代码或在JSFIDLE上创建示例。其余部分如上所述。如果可能，请添加带有css代码的完整页面。这样我就可以在than的基础上创建FIDLE，并为您提供示例“…$（“#mileheader”）。单击（函数（e）{if（e.target.id=='mileheader'）{…”。你看到函数只在点击#mileheader时触发了吗？那么e.target.id怎么可能不是“mileheader”呢？然后你删除了这个类？这里的逻辑很糟糕。代码还有很多其他问题。onclick事件并没有删除隐藏类。哦，你的意思是，如果你想在完成i单击链接不可见？我的意思是在将其取消隐藏后。当我单击未隐藏的分区时，它应保持可见，除非我在该分区外单击。告诉我有关您的问题。单击它不会取消隐藏。不要删除隐藏类
jQuery(document).ready(function($) {

    $('#headermile').click(function(event) {
        event.preventDefault();
        $("#mileheader").removeClass("hide");
    });

    $(document).on('click', function(event) {
        var container = $("#mileheader");
        var button = $("#headermile");
        if (!container.is(event.target) && container.has(event.target).length === 0 && !button.is(event.target)) {
            $("#mileheader").addClass("hide");
        }
    });
});