Javascript使用document.onclick关闭下拉列表

我有一个使用ul和li的下拉列表：

<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>

<ul id="options" class="options_content hide">
      <li>
           option one
      </li>
</ul>

但问题是，他们第一次加载页面时，必须在单击切换之前单击某个位置一次。在第一次点击后，它工作正常，他们只需要在第一次点击两次，这可能会很烦人

---

你知道它在做什么，为什么会取消或忽略第一个切换吗？谢谢。

在另一个事件处理程序中添加事件处理程序通常是错误的。只需绑定您的

$（“.options\u toggle”）。单击顶级的处理程序（）


$（文档）.ready（函数（）{
$（“.options\u toggle”）。单击（函数（e）{
//防止在单击切换打开下拉列表时立即关闭它
e、 停止传播（）；
});
$（文档）。单击（函数（e）{
//隐藏下拉列表
$（“.options_content”）.removeClass（“show”）；
$（“.options_content”）.addClass（“hide”）；
});
});.show{display:block；}.hide{display:none；}这些是我的show和hide类（如果有关系的话）。也许有一个更好的方法，但这通常似乎是可行的，只要show（）和hide（）或toggle方法也可以实现。没必要写得太详细了他们帮了。。。但只有在我有这个下拉列表的两页中的一页。另一个页面仍然运行文档单击，即使我单击.options\u切换，该页面在切换打开后也会立即隐藏下拉列表。我已经走到一半了，但至少它能工作
$(document).ready(function () {
document.onclick = function(e) {

    // prevent the dropdown from closing instantly when you click the toggle to open it
    $(".options_toggle").click(function (e) {
        e.stopPropagation();
    });

    // hide the dropdown
    $(".options_content").removeClass("show");
    $(".options_content").addClass("hide");
};
});