讓我的按鈕類型=“提交”打開另一只手風琴

Question

在我的使用Bootstrap3的網站上，我的頁面上有3個手風琴。 所有的手風琴都有字段和按鈕，每個都有自己的過程。

我遇到的問題是，當我從手風琴1單擊我的<button type="submit"> ，我希望它打開手風琴2。 該按鈕必須在我后面的代碼中觸發，以便它在打開手風琴2之前終止在手風琴1中完成的過程。顯然，我不能使用<button type="button">因為這不會在后面的代碼中觸發，因此我將樣式設置為<a>但后來意識到我無法在后面的代碼中觸發它。

我得到的一種解決方案是在按鈕上添加href ，盡管這不被支持，因為它刪除了我的手風琴中的所有內容，因此我還可以通過什么其他方法指示我的按鈕在代碼中觸發以結束過程，然后打開手風琴2。

也許需要用JavaScript / jQuery或直接用HTML來完成，我不知道。 我更喜歡HTML，但是我願意接受所有建議。

我用Google搜索它，我知道對於button type="button" ，以下屬性是必需的data-toggle="collapse" data-parent="NameOfMyParent"

Answer 1

是的，您必須使用javascript（因為您已經在手風琴上使用過javascript）。 我假設您使用的是jquery（因為您使用的是Bootstrap）。 因此，一種解決方案是綁定一個事件以防止提交（在表單提交或單擊按鈕時），然后使用$.ajax()提交表單$.ajax()如果您的表單包含某些上載過程，這可能很復雜）。

$("#your_form_id").on("submit", function(e){
  e.preventDefault();
  var url = $(this).action;
  var data = {};
  /* get your form datas here */
  $.ajax({
    url:url,
    data:data,
    /* use any of theses callback, or none 
     *if you don't care about the request is correct or not
     */
    success:function(res){},
    error:function(res){},
    complete:function(res){
       // call your second accordion here
    }
  })
});

或者，您可以使用<input type="button">並執行相反的工作：將事件綁定到該事件以觸發Submit，或者僅啟動手風琴，或執行任何操作。

Answer 2

固定。 我要做的就是向panel-body添加一個id ，然后使用data-target在我的按鈕中引用它