我目前正在开发一个 wiki 页面并希望实现以下目标:
我有两个包裹在包装器中的 div。第一个将是关键字的容器，第二个将是关键字描述的容器。默认情况下，第二个是隐藏的，一旦用户点击关键字就会弹出。我尝试设置一些 javascript，但无论何时单击关键字 div 都没有任何反应。
有什么解决办法吗？
非常感谢您!
$(".Keyword").click(function() {
$(".Keyword").next(".Content").attr("display: true;");
});.listWrapper {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.Keyword {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
padding-bottom: 5px;
}
.Keyword:hover {
cursor: pointer;
}
.Content {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<body>
<div class="listWrapper">
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
</div>
</body>
</html>最佳答案
您想将 css 更改为 (.css('display', 'block')) 或 (.toggle()) 。内容，在被点击的.Keyword旁边($(this)):
$(".Keyword").click(function() {
$(this).next(".Content").toggle();
});.listWrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Keyword {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
padding-bottom: 5px;
}
.Keyword:hover {
cursor: pointer;
}
.Content {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<body>
<div class="listWrapper">
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
<div class="keyPairWrapper">
<div class="Keyword">Click me to show my content</div>
<div class="Content">This is the content for Key1</div>
</div>
</div>
</body>
</html>关于javascript - jQuery/如何使用类 XY 定义下一个元素并使用点击功能将其显示更改为 "true"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58779835/