Question

我创建了一个带有2个选项的下拉列表，menuitem1和menuitem2。但是当我点击外面时，下拉列表没有隐藏。

根据click()函数，当我点击自己时，下拉列表会隐藏。我应该在哪里添加$('#listdown').hide('slow')代码？

我在JavaScript中编写了以下代码：

$(function(){ 
    $(document).click(function(){
        $('#listdown').hide('slow');
    });
    $("#listdown").click(function(e){
        e.stopPropagation();
    });
});

function click_gearbox(e)
{
    var gear_box = document.getElementById('gearbox');
    gear_box.style.display = 'none';    

    if (gear_box.style.display == "none") {
        // Getting the actually position of the mouse 

        list_down.style.top = e.clientY + 'px';
        list_down.style.left = e.clientX + 'px';
        list_down.style.display ='block';
        gear_box.style.display = 'block';
    }
    $('.dropdown-menu');
}

HTML：

<body>
    <p id="on_body"></p>
    <div id= "gearbox" class="dropdown" >
        <a class="dropdown-menu" data-toggle="dropdown" href="#"></a>
        <ul id = "listdown" class="dropdown-menu" role="menu" aria-labelledby="showgear">
            <li role="presentation"><a role="menuitem1" tabindex="-1" href="#">list1</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem2" tabindex="-1" href="#">list2</a></li>      
        </ul>
    </div>
</body>

Answer 1

如果你使用bootstrap，似乎你遗漏了一些东西，你必须添加dropdown-toggle类。

1) <a class="dropdown-menu" data-toggle="dropdown" href="#"></a>
2) <a class="dropdown-menu dropdown-toggle" data-toggle="dropdown" href="#"></a>

在Dropbox外部单击时，下拉列表不会隐藏

1 个答案: