Javascript jQuery show（）和hide（）用于页面上的多个链接

我正在编写一个网页，该网页将有三种形式用于隐藏在divs中的相应问题-我在bootstrap的框架中使用一个简单的.accordion切换来实现此功能

• 当用户选择“提问”按钮时，它会向下切换（使用.accordion toggle）并显示一个表单-使用hide（）时，“提问”链接应该会消失

• 表单将有一个提交按钮来发布表单，还有一个取消链接-取消链接应触发表单折叠（使用bootstrap.collapse），同时“提问”按钮应重新出现
  我能够使用jQuery中的show（）和hide（）方法使其工作。但是，由于同一页面上有三个取消按钮，我不确定如何将唯一标识符附加到每个链接，以正确折叠正确的div

下面的小提琴是迄今为止最接近的解决方案

See @DanielAlmeida Fiddle
https://jsfiddle.net/ek57ao0y/
    <div class='form form0'>
      <ul>
        <li><a href="#" class='showForm' data-target='.form1'>Show form   1</a></li>
        <li><a href="#" class='showForm' data-target='.form2'>Show form 2</a></li>
        <li><a href="#" class='showForm' data-target='.form3'>Show form 3</a></li>
        <li><a href="#" class='showForm' data-target='.form4'>Show form 4</a></li>
      </ul>
    </div>
    
    <div class='form form1'>
    
      <h3>Form 1</h3>
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </div>
    
      <p>
        <a href="#" class='cancel' data-target='.form0'>Cancel</a>
      </p>
    
    </div>
    
    <div class='form form2'>
    
      <h3>Form 2</h3>
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </div>
    
      <p>
        <a href="#" class='cancel' data-target='.form0'>Cancel</a>
      </p>
    
    </div>
    
    <div class='form form3'>
    
      <h3>Form 3</h3>
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </div>
    
      <p>
        <a href="#" class='cancel' data-target='.form0'>Cancel</a>
      </p>
    
    </div>
    
    <div class='form form4'>
    
      <h3>Form 4</h3>
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </div>
    
      <p>
        <a href="#" class='cancel' data-target='.form0'>Cancel</a>
      </p>
    
    </div>

见@danielalmeda Fiddle
https://jsfiddle.net/ek57ao0y/






表格一


表格二


表格三


表格四

您可以通过更改一些代码来实现这一点。。通过确保隐藏并显示正确的元素。下面的内容应该可以帮你完成这项工作

$（函数（）{
$（“.submit collapse”）。单击（函数（）{
$（“.contact form”）.show（）；
$（“.submit collapse”）.hide（）；
});
$（“.cancel link”）。单击（函数（）{
$（“.contact form”）.hide（）；
$（“.submit collapse”）.show（）；
})
});
。联系方式{display:none；}

还有问题吗？
名称
电子邮件
电话
消息
“我不知道如何将唯一标识符附加到每个链接以正确折叠正确的div”

您可以使用parent（）函数。示例：此代码删除父div中的所有内容…其中此链接为：

<div>blablabla something <a href='#null' onclick="$(this).parent(\'div\').remove();">Remove</a></div>

废话

---

在您的原因中，您不会使用“删除”，而是调用colapse函数。

我认为您可以在链接中使用目标。。请看这个@Danielalmeda-谢谢，您如何定位要隐藏的特定表单？使用当前代码，单击“显示表单”链接时，所有表单链接都将消失。请从第一个div中删除

表单

类。。将此

class='form0'

更改为

class='form0'

谢谢您的回复，但我将在页面上有三个其他具有相同功能的表单。因此，我不确定如何为相应的表单指定正确的hide（）和show（）。您还有3个其他表单吗？同样的形式是什么？你能更新你的答案让我明白你的意思吗？基本上，如果你再重复你做的两次，那就是我想要完成的。那么我们还有一个问题吗？提交你的答案还有一个问题吗？提交你的答案还有一个问题吗？提交你的答案。这是b/c键，当我在前面尝试此操作时，点击表单二的取消链接将切换表单一，而不是相应的表单。提前谢谢！