我在 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>
还有这个 jquery:
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
var visivel = $(this).closest('div').find(".abrefecha").is(":visible");
if (visivel)
{
$(this).closest('div').find(".abrefecha").hide();
}
else
{
$(this).closest('div').find(".abrefecha").show();
}
});
});
但我不知道为什么他不能显示或隐藏我的 div。我已经测试过，如果可见或不可见，他会返回...但是当我尝试显示或隐藏时，什么也没有发生...
有什么想法吗？
谢谢!
拉斐尔
最佳答案
在您的代码中，只有一个 div 包含类 abrefecha，因此您可以直接访问该元素。对于元素的显示/隐藏，您可以使用 jQuery 的切换功能。
您可以直接在点击处理程序中访问该 div。
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
$('.abrefecha').toggle();
});
});
关于javascript - Jquery - 获取最接近的div并显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47413963/