我尝试按照这个 link 的步骤操作但我无法让它发挥作用。
我正在努力做到这一点，以便在通过 HTML 在 WordPress 中制作的联系表单中，如果用户选中一个框，则会显示其他内容。我实现了出现在我的网页链接中的代码，并将 CSS(不是 SCSS)添加到 Wordpress 允许您执行的自定义 CSS 页面详细信息。但是，尽管我认为我遵循了所有正确的步骤，但始终会显示只有在选中该框时才会出现的消息。
给出的示例我将其缩短为
<form name="Inscripción" method="POST" onsubmit="return" form_validation()="" action="../customer-details.php">.
<input type="radio" name="choice-animals" id="choice-animals-dogs"><br>
<label for="choice-animals-dogs">I like dogs more</label><p></p>.
<div class="reveal-if-active"> Anything you want in here. </div>
</form>
添加的CSS是
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
}
input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
opacity: 1;
max-height: 100px; /* little bit of a magic number :( */
overflow: visible;
}
感谢您提供的任何帮助!
最佳答案
我已经检查了您的代码，它似乎对我有用。如果 CSS 代码不适合你。您可以使用下面的 jquery 代码在选中的 radio 上显示消息。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.reveal-if-active').hide();
jQuery('input[type="radio"]').change(function() {
if (jQuery(this).is(':checked')) {
jQuery('.reveal-if-active').show();
}
});
});
</script>
</head>
<form name="Inscripción" method="POST" onsubmit="return" form_validation="" action="../customer-details.php">.
<input type="radio" name="choice-animals" id="choice-animals-dogs"><br>
<label for="choice-animals-dogs">I like dogs more</label><p></p>.
<div class="reveal-if-active"> Anything you want in here. </div>
</form>
关于html - 选中复选框后显示消息 - HTML 联系表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56331576/