Bootstrap
登录 注册

如何在JavaScript中隐藏上一个div？

javascript
发布时间：2020-07-07 17:42

我有4格。当我单击div之一时，显示的绿色将扩大。然后，我单击另一个女主角，还将显示带有字幕的绿色背景。我的意思是，我只希望扩展一个div。例如，如果单击3 div，它将向我扩展3 diva的内容。然后单击2 div，它会向我扩展2 diva的内容，并自动隐藏上一个已扩展的div的内容。我希望每个人都能理解我想做什么。

Delivered-To:   myemail@mydomain.com
Return-Path:    <bounces+14130655-c4d2-myemail=mydomain.com@sendgrid.net>
Delivered-To:   myemail@mydomain.com
Received:   from director12.mail.ord1d.rsapps.net ([172.27.255.8]) by backend25.mail.ord1d.rsapps.net with LMTP id OALhG8KxBF9jTAAAANS3aA for <myemail@mydomain.com>; Tue, 07 Jul 2020 13:32:50 -0400
Received:   from proxy10.mail.iad3a.rsapps.net ([172.27.255.8]) by director12.mail.ord1d.rsapps.net with LMTP id WBInGcKxBF/cKgAAIasKDg ; Tue, 07 Jul 2020 13:32:50 -0400
Received:   from smtp15.gate.iad3a ([172.27.255.8]) (using TLSv1.2 with cipher ECDHE-RSA-AES256-GCM-SHA384 (256/256 bits)) by proxy10.mail.iad3a.rsapps.net with LMTP id QPz7EsKxBF80MAAAnQ/bqA ; Tue, 07 Jul 2020 13:32:50 -0400
Return-Path:    <bounces+14130655-c4d2-myemail=mydomain.com@sendgrid.net>
X-Spam-Exception:   WHITELISTED
X-Spam-Threshold:   95
X-Spam-Score:   100
X-MS-Exchange-Organization-SCL:     9
Precedence:     junk
X-Spam-Flag:    YES
X-Virus-Scanned:    OK
X-Orig-To:  myemail@mydomain.com
X-Originating-Ip:   [192.254.125.54]
Authentication-Results:     smtp15.gate.iad3a.rsapps.net; iprev=pass policy.iprev="192.254.125.54"; spf=pass smtp.mailfrom="bounces+14130655-c4d2-myemail=mydomain.com@sendgrid.net" smtp.helo="o19225412554.outbound-mail.sendgrid.net"; dkim=pass header.d=sendgrid.net; dmarc=none (p=nil; dis=none) header.from=smecos.best
X-Suspicious-Flag:  NO
X-Classification-ID:    e0a3814e-c077-11ea-8ea3-525400f46865-1-1
Received:   from [192.254.125.54] ([192.254.125.54:40911] helo=o19225412554.outbound-mail.sendgrid.net) by smtp15.gate.iad3a.rsapps.net (envelope-from <bounces+14130655-c4d2-myemail=mydomain.com@sendgrid.net>) (ecelerity 4.2.38.62370 r(:)) with ESMTPS (cipher=AES256-GCM-SHA384) id 69/3D-03017-1C1B40F5; Tue, 07 Jul 2020 13:32:49 -0400
DKIM-Signature:     v=1; a=rsa-sha256; c=relaxed/relaxed; d=sendgrid.net; h=content-type:from:subject:to; s=smtpapi; bh=kfSTUxrtrj7Cfftqpn3LN0WgHvE5kCnC+uOSG98vgVw=; b=h9mc6mDQC6rOc ccC9wL3Kli8FNwOSt5jau76QDpLrBAbHKhT396C0WbX2/KSD3uThrlp4nUXnvjSz r89bSPYTB6MJrgneNAlDS8NUaLi+NsKiUoR2rzuNp4DiS7srNyXLmpiDD2CT1ngR 1sWo8vVID+7G9+Zj/LmG4Hf8n1JV44=
Received:   by filter1449p1las1.sendgrid.net with SMTP id filter1449p1las1-6945-5F04B1AF-2 2020-07-07 17:32:31.196480369 +0000 UTC m=+669233.137313263
Received:   from localhost.local (unknown) by ismtpd0002p1lon1.sendgrid.net (SG) with ESMTP id ubRiQA93Qiu1jVJoiOUwWA for <myemail@mydomain.com>; Tue, 07 Jul 2020 17:32:30.923 +0000 (UTC)
Content-Type:   text/html;
From:   LeafFilter Promotion <bounce@smecos.best>
Subject:    Clean-Flowing Gutters For Life. NOW 10% Off
To:     myemail@mydomain.com
Date:   Tue, 07 Jul 2020 17:32:31 +0000 (UTC)
Message-ID:     <ubRiQA93Qiu1jVJoiOUwWA@ismtpd0002p1lon1.sendgrid.net>
X-SG-EID:   pcWxy9UBUtUw1gLvETZLKtJE+upTXkXQzSeXVboYOfj8445+b2JsYfGgCpUWh8jVevl8/mhHKM7/bO cH66Ixkc6hUTlPM1+gw7fPZ+GgUnTm9aSlAe3BVn04Ij2UoKzBcvDZTSeQ36bqJOD3LuCa3N042M5N 5w7kLpwCQtqtjsCrM4HXT078AKROMUSpgkSXwz0ZXJbX5V+mjjJlMheILWef2HZCdQIqmghlz64LFz s=

<script>

function showHide(obj)
{

var nextObj=obj.nextSibling;
while(!nextObj.tagName) nextObj=nextObj.nextSibling;
nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
}

</script>
.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;
}

回答1

您的代码中有几个错误：

  1. div未被“关闭”
  2. 不是obj.nextSibling，而是obj.nextElementSibling（有一个区别：What is the difference between node.nextSibling and ChildNode.nextElementSibling?）

更正这些错误并添加了用于关闭其他div的代码后，此代码段将起作用：

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;
}
<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>
javascript 相关推荐