Question

html是这样的：

<main class="wrapper">
    <section>
        <div class="card">
            <div class="card-header bg-green">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-check-circle-o fa-white icon-lg"></i>
                <h2>Line #1</h2>
                <p>Available</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-green">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-check-circle-o fa-white icon-lg"></i>
                <h2>Line #2</h2>
                <p>Available</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #3</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #4</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #5</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
    </section>
</main>

jquery代码是这样的：

for(var i = 0; i < 5; i++){
    var btnSelector = ".dropdown:eq(" + i + ") .dropbtn";
    var drpSelector = ".dropdown:eq(" + i + ") .dropdown-content";

    $(btnSelector).on("click", function(event){
        if($(".dropdown:eq(0) .dropdown-content").is(":visible")){
            $(".dropdown:eq(0) .dropdown-content").hide();
        }
        else{
            $(".dropdown:eq(0) .dropdown-content").show();
        }
    });
}

被认为是第＆＃34; .dropbtn＆＃34; 的第n个按钮，向它添加一个函数，它显示或隐藏第n个下拉菜单容器，类为< I>＆＃34; .dropdown含量＆＃34; 的。这两个都在类＆＃34; .dropdown＆＃34; 中，因此为什么.eq（）用于下拉列表而不是dropdown-content类。但是当它运行时，只使用任何按钮显示/隐藏第五个下拉内容。但是当硬编码时，意思是这样的：

$(".dropdown:eq(0) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(0) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(0) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(0) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(1) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(1) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(1) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(1) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(2) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(2) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(2) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(2) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(3) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(3) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(3) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(3) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(4) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(4) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(4) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(4) .dropdown-content").css("display","none");   
    }
});

它正确显示特定按钮的相应下拉列表。我可以就如何解决这个问题寻求帮助吗？我需要这个不要硬编码，因为目前还不确定网站需要多少这样的下拉菜单。

Answer 1

感谢大家在这里，当有人发布了一个带循环的事件处理程序实例时，添加了另一个处理所述事件的函数，它现在可以工作了。

for(var i = 0; i < 5; i++){
    (function(i){
        var btnSelector = ".dropdown:eq(" + i + ") .dropbtn";
        var drpSelector = ".dropdown:eq(" + i + ") .dropdown-content";

        $(btnSelector).on("click", function(event){
            if($(drpSelector).is(":visible")){
                $(drpSelector).hide();
            }
            else{
                $(drpSelector).show();
            }
        });
    })(i);
}

Answer 2

您可以尝试以下方式：

$(".dropbtn").on("click", function(event){
    $(this).siblings('.dropdown-content').toggle();
});

点击任意.dropbtn，找到班级.dropdown-content的兄弟，并显示/隐藏它。

将onclick函数添加到几个显示/隐藏相应元素的类似按钮

2 个答案: