让我的button type="submit"打开另一个手风琴

Make my button type="submit" open another accordion

本文关键字:quot 另一个 手风琴 submit 我的 button type      更新时间:2023-09-26

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

我的问题是,当我点击我的<button type="submit">从手风琴1,我希望它打开手风琴2(例如)。按钮必须在后面的代码中触发,以便在打开accordion 2之前终止在accordion 1中完成的过程。显然,我不能使用<button type="button">,因为这不会在后面的代码中触发,我设置了<a>,但后来意识到我无法在后面的代码中触发它。

我得到的一个解决方案是将href添加到按钮,虽然这是不支持的,因为它从我的手风琴中删除了所有内容,所以我可以用什么其他方法来指导我的按钮在代码后面触发结束我的过程,然后打开手风琴2。

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

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

是的,您必须使用javascript(就像您已经使用手风琴一样)。我假设您使用jquery(就像您使用Bootstrap一样)。因此,一个解决方案是绑定一个事件来防止提交(在表单提交或按钮单击时),并使用$.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">并做相反的工作:将事件绑定到它以触发提交,或者只是启动手风琴,或任何事情。

修复。我所需要做的就是将id添加到panel-body中,然后使用data-target

在我的按钮中引用它