Html 阻止下拉关闭单击外部是否在codeply/JSFIDLE中工作，但在我自己的项目中不工作？

你好，伙计，我今天有个问题，我一直在努力。但什么都不管用。我想要和这个一样的效果->

我只想在单击按钮时关闭下拉菜单。我将准确的代码复制到我自己的项目中，当单击“外部”时，它将关闭？它不应该像codeply示例那样关闭。我不知道如何解决这个问题

我试着用一个点击目标id来改变代码，然后在点击id时让下拉菜单关闭，但这也不起作用，我没有办法尝试。我希望有人能帮我

这是我的代码

    <li class='keep-open'>
    <a id='dropdownMenuLogin' class='nav-link badge no-style-for-badge' data-toggle='dropdown' href='#'>Login</a>
        <!-- Dropdown login begins here -->
    <ul class='dropdown-menu dropdown-menu-login mt-1'>
        <li class='p-3'>
            <form method='POST' id='loginFormHeader'>
                <!-- Login code should be here -->
            </form>
        </li>
    </ul>
</li>

如果未单击

#dropdownMenuLogin

，我希望它可关闭为false。因此，我只想在我点击“按钮”时关闭和打开它，就像我的案例中的codeply链接一样，它是一个

#dropdown menulogin

但是解决这个问题的开始是为什么它在codeply中工作，而不是在我自己的项目中。我完全复制了所有内容来测试它，当单击外部时它就关闭了

Jquery版本：3.4.1 引导版本：4.0.0

$('IF NOT -> #dropdownMenuLogin').click(function() {
    $('.keep-open').on({
        "shown.bs.dropdown": function() { this.closable = false; },
        "click":             function() { this.closable = false; },
        "hide.bs.dropdown":  function() { return this.closable; }
  });
});