Question

我正在尝试使用jQuery创建一个下拉菜单。

HTML是：

<div id="cats">
    <div id="cat_ram">
        <span>RAM</span>
        <div class="cat_arrow"></div>
        <div class="cat_options">
            <ul class="cat_list">
                <li>1GB</li>
                <li>2GB</li>
                <li>3GB</li>
                <li>4GB</li>
           </ul>
        </div>
    </div>
</div>

我的jQuery代码是：

$(document).ready(function(e) {

    $('.cat_options').hide();

    $('.cat_arrow').click(function(){
            $('.cat_options').toggle();
        });


        $(document).click(function(){
        if($('.cat_options').is(':visible')){
            $('.cat_options').hide();
            }
        })
});

以下是我要完成的事情：

1）当点击 .cat_arrow 时，应显示下拉菜单，即 .cat_options 。再次点击它时，它应隐藏。

2）如果点击事件发生在页面上的任何其他位置（而不是.cat_arrow） .cat_options ，则 .cat_options 会显示 .cat_options 。

现在的问题是：

1）对于上面的代码， .cat_options 永远不会显示。如果我添加另一个像这样的条件

if($('.cat_options').is(':hidden')){
        $('.cat_options').show();

然后单击文档中的任何位置将使 .cat_options 可见，即 .cat_arrow 将变得无用。

Answer 1

在.cat_arrow点击停止传播：

$('.cat_arrow').click(function(e){
    e.stopPropagation();
    $('.cat_options').toggle();
});

jQuery .hide（）不适用于$（文档）.click

1 个答案: