我已经为每个产品创建了一个使用woocommerce的按钮，当单击它时，它意味着下拉一个带有相应ID的表单。我正在使用woocommerce来显示产品，并使用重力形式来显示表单。
我已将此代码 html 代码用于为按钮创建函数：
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
我在这个 html 块上方也有脚本（因为我尝试放入 head 部分，但给了我一个"null 不是对象错误"的文档。咔嚓...
<script>
var theid = "<?php echo get_the_ID(); ?>";
function myFunction() {
document.getElementById('gform_' + theid).classList.toggle('show');
}
</script>
当我去单击 3 个按钮中的任何一个时，它只会在第 3 个按钮上下降（先拉该 ID 而不获取其他 ID）。
如何使所有按钮下拉列表而不仅仅是一个？
任何帮助将不胜感激，因为我已经尝试解决这个问题一段时间了。
这是链接：http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/
请尝试以下代码：
<script>
function myFunction(myid) {
document.getElementById('gform_' + myid).classList.toggle('show');
}
</script><div class="dropdown">
<button onclick="myFunction(<?php echo get_the_ID(); ?>)" class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>您可以使用元素的下一个同级
元素 function myFunction(el) {
el.nextSibling.classList.toggle('show');
}
<button onclick="myFunction(this)" class="dropbtn">SPECIFY PRODUCT</button>
或者，我将提供一个jQuery解决方案，因为我比常规JS更适应它。WooCommerce已经使用它，所以库已经加载了。
我会从您的 HTML 中删除onclick()并依赖基于类的选择器。我假设您只想下拉与单击的按钮相关的表单。
<div class="dropdown">
<button class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
然后我的jQuery（你只需要在页脚中一次）看起来像：
$( document ).ready(function() {
$('.dropbtn').click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
})
});
这是一个小提琴示例