Javascript 单击按钮而不刷新整个页面

我正在使用Flask框架制作一个信息检索系统

当我点击一个名字时，我试图弹出一个div。现在，我正在循环浏览一个名字列表，并将它们作为按钮相邻输出。但是，当我点击一个按钮时，我想要一个div从该按钮上下拉下来。但是，每次我单击按钮，它都会刷新页面并删除所有输出的名称。现在甚至没有调用myDiv函数。如何在不删除所有其他输出的情况下使div显示在我按下的按钮下方

//actions.js
函数myDiv（名称）{
var x=document.getElementById（标记）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

{%if输出%}
要使用的顶级名称
{输出%中名称的百分比}
{{name}}
{%endfor%}
{%endif%}

默认情况下，

按钮的类型为
提交
。您必须将其隐式更改为
按钮
：

<button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>

{{name}
按钮您的按钮类型需要设置为“按钮”


//action.js
函数myDiv（名称）{
var x=document.getElementById（标记）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

{%if输出%}
要使用的顶级名称
{输出%中名称的百分比}
{{name}}
{%endfor%}
{%endif%}
使用JQuery bro。如果您想在此处了解有关Jquery的更多信息-

通过Jquery的解决方案非常简单

$("#your_button_id").click(function(){

   $("#your_div_id").hide(); 
   $("#your_div_id").show();  

   /*Whatever you want to do you can do here.*/
})

希望能有所帮助