首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用javascript使div出现或消失

使用javascript使div出现或消失
EN

Stack Overflow用户
提问于 2018-06-09 09:08:49
回答 2查看 175关注 0票数 0

我正在尝试让一些div按照我想要的方式运行。以下是我的相关HTML:

代码语言:javascript
复制
<ul class="services">
<li class="business-formation" id="services-li-1">Business Formation</li>
<li class="domestic-relations" id="services-li-2">Domestic Relations</li>
<li class="estate-probate" id="services-li-3">Estate & Probate</li>
</ul>

<div class="business-formation-list" id="business-formation-list">
<ul>
<li>Items go here</li>
</ul>
</div>

<div class="domestic-relations-list" id="domestic-relations-list">
<ul>
<li>Items go here</li>
</ul>
</div>

<div class="estate-probate-list" id="estate-probate-list">
<ul>
<li>Items go here</i>
</ul>
</div>

我希望div在相应的li被单击时出现和消失(它们是链接)。这是我的Javascript:

代码语言:javascript
复制
document.getElementById('services-li-1').style.cursor = "pointer";
document.getElementById('services-li-2').style.cursor = "pointer";
document.getElementById('services-li-3').style.cursor = "pointer";
const div1 = document.querySelector('business-formation-list');
const div2 = document.querySelector('domestic-relations-list');
const div3 = document.querySelector('estate-probate-list');
const click2 = document.getElementById('services-li-2');

document.addEventListener('click', (event) => {
if (event.click2.className = 'domestic-relations') {
div1.style.display = 'none';
div2.style.display = 'block';
div3.style.display = 'none';
}
});

这不会导致任何事情发生,但我希望它做的是在单击类名为“anything relations”的li时显示第二个div。我做错了什么?谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-09 09:11:10

如果你使用的是querySelector,你需要告诉它它是一个类。您可以通过在相关类之前添加.来做到这一点。

所以document.querySelector('business-formation-list')应该是document.querySelector('.business-formation-list')

但是,如果您只使用它一次,它应该是一个ID,而不是一个类。

票数 3
EN

Stack Overflow用户

发布于 2018-06-10 09:58:49

我也是个新手,和你有类似的问题。我想出了一个解决方案,所以它可能对你也有帮助。这个解决方案很长,所以我希望你能容忍我。

第一件事就是把你的div类“家庭/地产/业务”改成“列表”。当你为它做css时,你会想要对它们应用相同的样式。如果您需要更多的样式,您可以始终以ID为目标或添加另一个css类。

完成此操作后,对该列表应用"display: none;“。这将一次隐藏所有的ul。

javascript看起来像这样。我添加了一些关于我为什么选择做我所做的事情的描述。

代码语言:javascript
复制
var serviceType = document.querySelectorAll(".serviceType");
var serviceTypeArray = Array.prototype.slice.call(serviceType); // this will 
 //change your serviceType from a nodelist to an Array.
var serviceDescription = document.querySelectorAll(".list"); // to grab the 
 //list of descriptions and make it into an "array"

for ( i = 0 ; i < serviceTypeArray.length ; i++) {
 var services = serviceTypeArray[i]; // I created this variable to store the 
   // variable "i"
 services.addEventListener( "click" , displayServices); }
  // created this "for loop" to loop through every element inside the array 
 //and give it the "click" function

function displayServices() {
  var servicePosition = serviceTypeArray.indexOf(this); // when we click the 
    // event, "this" will grab the position of the clicked item in the array
  if (serviceTypeArray[servicePosition].hasAttribute("id") == false) { // 
   //  the hasAttribute returns values of true/false, since initially the 
   // serviceTypeArray didn't have the "id" , it returns as false
  serviceTypeArray[servicePosition].setAttribute( "id" , "hide"); // I've 
   // added the "setAttribute" function as a unique indicator to allow 
   // javascript to easily hide and show based on what we are clicking
  serviceDescription[servicePosition].style.display = "block"; // When you 
   //click one of the serviceType, it returns an the index number (aka the 
   // position it is inside the arrayList)
   //this gets stored inside servicePosition(aka the actual number gets 
  //  stored).
  // Since i've made an array to store the the description of each service, 
  // their position in the array correspond with the service's position 
  //inside the serviceType array made earlier; therefore, when I press one 
  // particular serviceType (ie i clicked on "business formation"), the 
  // appropriate text will pop up because the position of both the name and 
  // its description are in the same position in both arrays made
 } else if (serviceTypeArray[servicePosition].hasAttribute("id") == true ) { 
  //since the serviceType now has an attribute, when we check it, it'll come 
  // back as true
    serviceTypeArray[servicePosition].removeAttribute("id"); //we want to 
    // remove the id so next time we click the name again, the first "if" 
    // condition is checked
     serviceDescription[servicePosition].style.display = "none"; //this is    
     //  so that the display goes back to "none"
      }
    }

这将允许单击任何名称并随意显示/隐藏它们。您甚至可以显示2/3或全部三个,这取决于您。我希望这能有所帮助,并且我希望解释足够清楚!如果你对此有任何问题,请告诉我!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50770047

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档