jQuery show（）和hide（）用於頁面上的多個鏈接

Question

我正在編寫一個網頁，該網頁將針對隱藏在divs中的相應問題提供三種形式-我在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>

Answer 1

您可以通過在代碼周圍進行一些更改來實現此目的：確保隱藏並顯示正確的元素。 以下應為您完成這項工作。

 $(function() { $(".submit-collapse").click(function(){ $(".contact-form").show(); $(".submit-collapse").hide(); }); $(".cancel-link").click(function(){ $(".contact-form").hide(); $(".submit-collapse").show(); }) }); 

 .contact-form{display: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> 

Answer 2

“我不確定如何在每個鏈接上附加唯一標識符以正確折疊正確的div”

您可以使用parent（）函數。 示例：此代碼刪除父div中的所有內容...此鏈接為：

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

由於您的原因，您將不使用“刪除”，而是調用折疊函數。