Javascript Jquery-获取最近的div并显示_Javascript_Jquery_Html

Javascript Jquery-获取最近的div并显示

javascript jquery html

Javascript Jquery-获取最近的div并显示,javascript,jquery,html,Javascript,Jquery,Html,我在stackoverflow搜索过这里，但没有找到我的案子的解决方案我想做一个组div，如果单击向下按钮，该组div将显示或隐藏…具有以下HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

我在stackoverflow搜索过这里，但没有找到我的案子的解决方案

我想做一个组div，如果单击向下按钮，该组div将显示或隐藏…具有以下HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Relatorio</title>
<script src="/Scripts/jquery-1.8.2.js"></script>


</head>


<body style="border-top: solid 10px #ffffff" class="container">

    <div>
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <input type="text" id="" name="" />
                    </div>
                    <div class="col-lg-4">
                        <div>                           

                            <div>

                                <div style="border:1px solid black;font-size:20px;overflow:auto;">              

                                        <div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    Relatorio 01
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;color: white">
                                            <div class="row" style="text-align:right;">
                                                <div class="col-sm-8">
                                                    field1
                                                </div>
                                                <div class="col-sm-4" style="text-align:right;">
                                                    <div id='botabrefecha'>
                                                        <i class='fa fa-angle-down'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="abrefecha" style="border:0px solid black;display:none">
                                            <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                                <div class="row">
                                                    <div class="col-sm-4">
                                                        field2 Group
                                                    </div>
                                                    <div class="col-sm-8" style="text-align:right;">
                                                        <input type="text" style="width:100%;" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                                <div class="row">
                                                    <div class="col-sm-4">
                                                        field3 Group
                                                    </div>
                                                    <div class="col-sm-8" style="text-align:right;">
                                                        <input type="text" style="width:100%;" />
                                                    </div>
                                                </div>
                                            </div>                    

                                        </div>      

                                        <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    txtCampo3
                                                </div>
                                                <div class="col-sm-8" style="text-align:right;">
                                                    <input type="text" style="width:100%;" />
                                                </div>
                                            </div>
                                        </div>   

                                </div>
                            </div>      

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>

但我不知道为什么他不能显示或隐藏我的div。我已经测试过了，他会返回，如果是可见或不可见的…但当我试图显示或隐藏，什么都没有发生

有什么想法吗

谢谢

Rafael

在您的代码中只有一个div包含类

abrefecha

，因此您可以直接访问该元素。要显示/隐藏元素，可以使用jQuery的切换函数

您可以在单击处理程序中直接访问该div

$(document).ready(function () {
    $('#botabrefecha').on('click', function () {
        $('.abrefecha').toggle();   
    });            
});

您的选择获取最接近的div，然后搜索它或其内容是否具有类“abrefecha”。但是最近的div没有。尝试使用

$（this.nexist（'div.abrefecha'）

rather但是如果我在这个类中添加更多元素？will也能工作吗？因为它会以友好的方式添加元素，所以在某些屏幕中，我会有更多元素与这个类一起…然后它会切换所有元素，然后您可以为每个特定组或特定类设置id属性，并根据需要切换它们。仅使用新类/idah ok更新单击处理程序中的选择器。我将尝试此操作！谢谢

$(document).ready(function () {
    $('#botabrefecha').on('click', function () {
        $('.abrefecha').toggle();   
    });            
});