jQuery / 如何使用类 XY 定义下一个元素并使用单击函数将其显示更改为"true"？

我目前正在开发一个wiki页面，希望实现以下目标：

我有两个用包装纸包装的潜水器。第一个是关键字的容器，第二个是关键字描述的容器。默认情况下，第二个是隐藏的，并且应该在用户单击关键字后弹出。我试着设置一些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()(. Content，它位于单击的.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>

您也可以使用toggle((。显示元素是否隐藏。如果元素可见，则隐藏

$(".Keyword").click(function() {
$(this).next(".Content").toggle();
});

.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>

javascript:中的一些错误

使用$(this)而不是$(".Keyword")来引用单击的元素，而不是all.Keyword元素
display: true无效，您需要使用display: block
.attr("display: true;")无效，您正在更改CSS，而不是属性，因此请使用.css('display', 'block')或更好的.show()或.toggle()

$(".Keyword").click(function() {
$(this).next(".Content").show();
});

相关内容

最新更新

热门标签：