如何在使用事件侦听器单击特定div时隐藏它

我想完成的事情是隐藏您单击的特定div，并显示另一个div

其中一个是这样的，正如你所看到的，我试图隐藏点击的元素，通过参数传递元素的id，但不起作用

var el = document.getElementById(obj);
el.style.display = 'none';
}

这就是它应该如何工作：https://www.screencast.com/t/WGeokVkv

到目前为止，我已经完成了显示被点击元素的下一个同级，但我无法隐藏被点击的那个，当它再次点击时，我也无法隐藏下一个同类

我该怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>

.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>

<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5><h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4><h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
<script>

</script>
</body>
</html>

您的代码不工作的原因是flex库具有样式display:flex!important。如果您添加display:none，它将被important导致的库样式覆盖。在您的javascript中，您必须以相同的方式执行操作。

这是正在运行的代码段。添加了解决方案来解释为什么它不起作用，您可以进一步优化代码。

var acc = document.getElementsByClassName("labels-wrapper");  
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
// console.log(this);
// this.style.display = "none!important";
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
console.log(obj);
var el = document.getElementById(obj); 
el.setAttribute('style', 'display:none !important');
}
function openQuestion(obj) {
var el = document.getElementById(obj); 
console.log(obj);
el.setAttribute('style', 'display:block');
var panel = el.nextElementSibling;
panel.style.display = "none";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card {
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}

.fa-question-circle {
font-size: 2rem;
color: #FFC600;
}

.card-subtitle {
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}

.hr-yellow-border {
border: 2px solid #FFC600;
}

.card-text {
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}

.hr-grey-border {
border: 2px solid #AB989D;
}

.labels-text {
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}

.labels-wrapper {
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center;
/*Take care with the transition*/
transition: 0.4s;
}

div.col-11>.panel>p {
font-size: small;
}

.plus-icon {
cursor: pointer;
transition: 0.4s;
display: inline;
}

.panel {
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel" onClick="openQuestion('question')">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4>
<h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

更新：根据OP.的要求，演示完整的代码

function toggleDivs() {
$("#div1").toggle();
$("#div2").toggle();
}

.div {
margin:50px;
height:200px;width:200px;background:blue;
}
#div2 {
background:red;display:none;
}
#div1 {z-index:10;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggleDivs()">Toggler</button>

<div class="div" id="div1"></div>
<div class="div" id="div2"></div>

使用jQuery，您可以使用toggle()函数在单击时显示或隐藏元素。

$('#question').toggle();

$('#question').click(function(){
$(this).toggle();
});

或者，如果希望使用class而不是ID属性，则可以使用事件委派来针对特定元素。

$('.question').on('click', function(){
$(this).toggle();
});

请尝试这个，

我删除了html中的相同图标。

这可以用js 更改图标

$(this).children(".plus-icon").text("+");// for + icon
$(this).children(".plus-icon").text("-");// for - icon

var acc = document.getElementsByClassName("labels-wrapper");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {

var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
$(this).children(".plus-icon").text("+");
} else {
panel.style.display = "block";
$(this).children(".plus-icon").text("-");
}
});
}

.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
</head>
<body>
<div class="container-fluid">
<div class="col-11">
<br>
<div class="card">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center"></i>
<div class="row">
<div class="col-12">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto">+</h4>
</div>
<div class="panel">
<p class="mt-2">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>

</script>
</body>
</html>

相关内容

最新更新

热门标签：