javascript - 让我的按钮类型 ="submit"打开另一个 Accordion

Question

在我使用 Bootstrap3 的网站上，我有一个页面上有 3 个 Accordion 。所有 Accordion 都有字段和按钮，每个都有自己的进程。

我遇到的问题是，当我单击我的 <button type="submit"> 时从 Accordion 1 开始，我希望它打开 Accordion 2(例如)。该按钮必须在我后面的代码中触发，以便它在打开 Accordion 2 之前终止在 Accordion 1 中完成的进程。显然我不能使用 <button type="button">因为这不会在后面的代码中触发，我将样式设置为 <a>但后来意识到我无法在后面的代码中触发它。

我得到的一个解决方案是添加 href到按钮，尽管这不受支持，因为它会删除我的 Accordion 中的所有内容，所以我可以通过其他方式指示我的按钮在后面的代码中触发以结束我的进程，然后打开 Accordion 2。

也许它需要在 JavaScript/jQuery 中完成，或者直接在 HTML 中完成，我不知道。我更喜欢 HTML，但我愿意接受所有建议。

我用谷歌搜索了一下，我知道是 button type="button"需要以下属性 data-toggle="collapse" data-parent="NameOfMyParent"

Answer 1

是的，您必须使用 javascript(因为您已经使用 Accordion 做到了这一点)。我假设你使用jquery(就像你使用Bootstrap一样)。因此，解决方案是绑定(bind)一个事件来阻止提交(在表单提交或按钮单击时)，并使用 $.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">并做相反的工作:将一个事件绑定(bind)到它以触发提交，或者只是启动 Accordion ，或者其他任何东西。