jQuery show() 和 hide() 用于页面上的多个链接

Posted

技术标签:

【中文标题】jQuery show() 和 hide() 用于页面上的多个链接【英文标题】:jQuery show() and hide() for multiple links on page 【发布时间】:2016-07-17 18:57:47 【问题描述】:

我正在编写一个网页,该网页将为隐藏在 div 中的相应问题提供三种形式 - 我在 bootstrap 的框架中使用简单的 .accordion-toggle 来实现此功能。

当用户选择“提问”按钮时,它会向下切换(使用 .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>

【问题讨论】:

我认为您可以在链接中使用目标。请参阅example @DanielAlmeida - 谢谢,您如何定位要隐藏的特定表单?使用您当前的代码,当您单击“显示表单”链接时,所有表单链接都会消失。 从第一个 div 中删除 form 类。将 class='form form0' 更改为 class='form0' check this example 【参考方案1】:

您可以通过更改一些代码来做到这一点.. 确保您隐藏并显示了正确的元素。下面应该为您完成这项工作。

$(function() 
  $(".submit-collapse").click(function()
      $(".contact-form").show();
      $(".submit-collapse").hide();
  );
  $(".cancel-link").click(function()
      $(".contact-form").hide();
      $(".submit-collapse").show();
  )
);
.contact-formdisplay:none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-trigger top-spaced hidden-md hidden-sm hidden-xs">
  <div class="panel panel-default no-border">
    <div class="panel-heading">
      <h4 class="drk-grey">
        Have another question? <a class="accordion-toggle collapsed collapsed grn-btn full-window-btn submit-collapse" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Submit Your Question </a>
      </h4>
    </div>
    <form class="contact-form" action="/mailers/faq_contact_us" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="L+9iNJ7+yKMBBIFsSv0nEzet6tit4bfxTaoUNbopARhIzoN/GL3fn40AaY1sV095jddz6fXzs0p20axPIfki+A==" />
          <div class="spaced">
            <label for="name">Name</label><input type="text" name="name" id="name" class="form-control" required="required" />
          </div>
          <div class="row spaced">
            <div class="col-md-6">
              <label for="email">Email</label><input type="email" name="email" id="email" class="form-control" required="required" email="true" />
            </div>
            <div class="col-md-6">
              <label for="primary_phone">Phone</label><input type="tel" name="primary_phone" id="primary_phone" class="form-control" required="required" phone="true" />
            </div>
          </div>
          <div class="spaced">
            <label for="message">Message</label><textarea name="message" id="message" class="form-control" required="required" rows="10" maxLength="1000">
</textarea>
          </div>
          <div class="spaced">
            <input type="submit" name="commit" value="Submit Question" class="btn btn-small text-center" /><a class="accordion-toggle collapsed collapsed cancel-link" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Cancel</a>
          </div></form>

  </div>

【讨论】:

感谢您的回复,但我将在页面上添加其他三个具有相同功能的表单。所以我不确定如何为相应的表单指定正确的 hide() 和 show()。 您还有其他 3 个表格吗?有什么相同的形式?你能更新你的答案,这样我就能明白你的意思了。 基本上,如果您要将您所做的事情再复制两次,这就是我想要完成的事情。所以我们会: - 还有其他问题吗?提交您的答案。 - 还有一个问题2?提交您的答案。 - 还有一个问题3?提交您的答案。这是关键 b/c,当我早些时候尝试点击表单二的取消链接时,将切换表单一,而不是相应的表单。提前致谢!【参考方案2】:

“我不确定如何将唯一标识符附加到每个链接以正确折叠正确的 div”

您可以使用 parent() 函数。示例:此代码删除父 div 内的所有内容...此链接所在的位置:

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

在你的事业中,你不会使用“删除”,而是调用折叠函数。

【讨论】:

以上是关于jQuery show() 和 hide() 用于页面上的多个链接的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Show / Hide 在 Android 上不起作用

10分钟-jQuery动画特效

关于JQUERY中的hide()和show()

请教jquery的hide()和show()方法遇到的问题

jQuery效果

jquery的hide和show方法疑问