문제가 있습니다. 모든 것이 작동하지만 extand div를 클릭하면 숨기고 싶습니다. 예를 들어 버튼 3과 div extands를 클릭하고 다시 한 번 클릭하면 div hide contain. 나는 모든 것을 시도하지만 작동하지 않습니다. 나는 많은 기능을 작성했지만 누군가가 나를 도울 수 있기를 바랍니다. 자바 스크립트의이 함수는 괜찮지 만 div hide에 포함 된 코드를 추가해야합니다.
function showHide(obj) {
const nextObj = obj.nextElementSibling;
const dropDowns = document.querySelectorAll('.drop')
dropDowns.forEach(e => {
e.style.display = 'none';
})
nextObj.style.display = 'block';
}.iptv{
width:200px;
height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}
.drop{
background-color:green;
width:200px;
height:50px;
margin-left:auto;
margin-right:auto;
}
a{
text-decoration: none;
color:white;
}
<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
</body>
코드 스 니펫에서에 nextObj.style.display = 'block';조건이 없으므로 button다시 클릭해도 항상로 설정 element됩니다 block. 여기에 해결책이 있습니다
var count = 0;
function showHide(obj) {
const nextObj = obj.nextElementSibling;
const dropDowns = document.querySelectorAll(".drop");
dropDowns.forEach((e) => {
e.style.display = "none";
});
if (count % 2 == 1) {
nextObj.style.display = "none";
count++;
} else {
nextObj.style.display = "block";
count++;
}
}.iptv{
width:200px;
height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}
.drop{
background-color:green;
width:200px;
height:50px;
margin-left:auto;
margin-right:auto;
}
a{
text-decoration: none;
color:white;
}<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다