Javascript 根据上一项切换显示，单击

使用HTML和CSS我实现了我想要的结果，但是这是通过使用

.item:hover+desc{display:block；}

-我想将

悬停

更改为

单击

事件，如本页所示

为了实现这一点，我尝试了很多不同的JS选项，最后得到了以下结果：

var box = document.querySelector('.desc');
document.querySelector('.item').addEventListener('click', function(el) {    
    if (box.style.display === 'none') {
        box.style.display = 'block';
        console.log(el);
    } else {
        box.style.display = 'none';
    }
});

它对第一个div正确工作，但对其他div无效

<div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
...
</div>


.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item, 
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item:hover + .desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

1.
说明1
2.
说明2
3.
说明3
4.
说明4
5.
说明5
6.
说明6
7.
说明7
8.
说明8
...
.集装箱{
宽度：95%；
保证金：自动；
显示：网格；
网格模板列：重复（8，1fr）；
网格自动流动：行密集；
网格间距：0.5em；
}
.项目，
.描述{
边框：1px纯灰；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：20px；
}
.项目：悬停+描述{
显示：块；
}
.描述{
背景：一枝黄花；
显示：无；
网格柱：1/-1；
}

使用jquery将简化任务

删除“悬停时显示div”的css样式，在使用jquery单击项后，隐藏所有描述extet current clicked，然后显示或隐藏当前单击

请参阅下面的代码片段

$（“.item”）。单击（“click”，函数（e）{
//得到当前的描述
让$desc=$（this.next（“.desc”）；
//隐藏当前所有其他描述
$（“.desc”）.not（$desc.hide（）；
//显示或隐藏当前描述
$desc.css（“显示”）=“无”？$desc.show（）：$desc.hide（）；
})

.container{
宽度：95%；
保证金：自动；
显示：网格；
网格模板列：重复（8，1fr）；
网格自动流动：行密集；
网格间距：0.5em；
}
.项目，
.描述{
边框：1px纯灰；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：20px；
}
.描述{
背景：一枝黄花；
显示：无；
网格柱：1/-1；
}

1.
说明1
2.
说明2
3.
说明3
4.
说明4
5.
说明5
6.
说明6
7.
说明7
8.
说明8
9
说明9
10
说明10
11
说明11
12
说明12
13
说明13
14
说明14
15
说明15
16
说明16
17
说明17
18
说明18
19
说明19
20
说明20
21
说明21
22
说明22
23
说明23
24
说明24

使用纯javascript无需JQuery

让lastVisibleDesc=null；
let items=document.queryselectoral（“.item”）；
items.forEach（item=>{
item.addEventListener（“单击”，el=>{
让itemDesc=item.nextElementSibling；
if（lastVisibleDesc）{
lastVisibleDesc.style.display=“无”；
}
lastVisibleDesc=itemDesc；
itemDesc.style.display=“块”；
});
});
.container{
宽度：95%；
保证金：自动；
显示：网格；
网格模板列：重复（8，1fr）；
网格自动流动：行密集；
网格间距：0.5em；
}
.项目，
.描述{
边框：1px纯灰；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：20px；
}
.描述{
背景：一枝黄花；
显示：无；
网格柱：1/-1；
}

试验
1.
说明1
2.
说明2
3.
说明3
4.
说明4
5.
说明5
6.
说明6
7.
说明7
8.
说明8
您可以使用普通的JavaScript进行编辑


window.onload=function（）{
var item=document.getElementsByClassName（'item'）；
对于（变量i=0；i

.container{
宽度：95%；
保证金：自动；
显示：网格；
网格模板列：重复（8，1fr）；
网格自动流动：行密集；
网格间距：0.5em；
}
.项目，
.描述{
边框：1px纯灰；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：20px；
}
.描述{
背景：一枝黄花；
显示：无；
网格柱：1/-1；
}

1.
说明1
2.
说明2
3.
说明3
4.
说明4
5.
说明5
6.
说明6
7.
说明7
8.
说明8
...
@SergioRapisarda不客气，如果这能解决您的问题，请接受答案