当您点击内部链接时，Bootstrap面板折叠会崩溃 [英] Bootstrap panel-collapse collapses when you click on a link inside it is clicked

问题描述

在下面的HTML页面中，当页面第一次加载时， Heading 1 和 Heading 2 正确折叠使用 class =panel-collapse collapse。然后 Collapse / Expand 在用户点击 Heading 。但是当用户在一个标题下点击 Heading 内的链接时，标题会崩溃。当点击 Heading 中的链接时，保持打开状态。只有当用户点击一个标题而不是点击一个标题内的链接时，才会出现Collapse / Expand行为。注意：我在使用Bootstrap 3.0的ASP.NET Core项目中使用它 - 但这应该没有关系。

 < div class =panel-group> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h4 class =panel-title> 
< a class =accordion-toggledata-toggle = collapsehref =＃ToolsID>标题1< / a> 
< / h4> 
< / div> 
< div class =panel-collapse collapseid =ToolsID> 
< div class =list-group> 
< a asp-controller =TestCtrlasp-action =TestActionclass =list-group-item>点击此处< / a> 
< a href =＃class =list-group-item>点击此处< / a> 
< / div> 
< / div> 
< div class =panel-heading> 
< h4 class =panel-title> 
< a class =accordion-toggledata-toggle =collapsehref =＃ReportsID> Heading 2< / a> 
< / h4> 
< / div> 
< div class =panel-collapse collapseid =ReportsID> 
< div class =list-group> 
< a href =＃class =list-group-item>点击此处< / a> 
< a href =＃class =list-group-item>点击此处< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
  

更新
< 源码在浏览器中查看html 如下所示：

  <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/> 
< title> ASP.NET Core Test App< / title> 
< link rel =stylesheethref =/ lib / bootstrap / dist / css / bootstrap.css/> 
< link rel =stylesheethref =/ css / site.css/> 
< / head> 
< body> 
< div class =container navbar navbar-inverse navbar-fixed-top text-center> 
< img src =/ images / nps.gif>< img src =/ images / nps_txt.gif> 
< / div> 
< div class =container nav nav-pillsstyle =margin-top：4px; background-color：cornsilk;> 
 
与< div class =panel-group> ....< / div>中的内容相同。如上面的示例中所示
 
< script src =/ lib / jquery / dist / jquery.js>< / script> 
< script src =/ lib / bootstrap / dist / js / bootstrap.js>< / script> 
< script src =/ js / site.js？v = EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo>< / script> 
 
< script> 
 $（'。list-group-item'）。click（function（e）{
 e.stopPropagation（）; 
}）
< / script> 
< / body> 
< / html> 
  

解决方案

您的HTML看起来正确。如果您正在使用的Bootstrap版本绑定了事件侦听器，即使您在锚点内单击，也会触发事件侦听器，您需要添加自己的JavaScript恐怕。

  $（'。list-group-item'）。click（function（e）{
 e.stopPropagation（）; 
}）
  

应该根据您的需要。

In following HTML page, the Heading 1 and Heading 2 rightly collapse when page loads first time (since I'm using class="panel-collapse collapse". Then Collapse/Expand works fine when user clicks on a Heading. But when a user clicks on a link inside a Heading under one heading, the heading collapses. I want it to stay it open when a link inside Heading is clicked. The Collapse/Expand behavior should only occur when user clicks on a Heading and not on clicking a link inside a Heading. I would prefer a solution wihtout using JavaSctipt. NOTE: I'm using it in an ASP.NET Core project with Bootstrap 3.0 - but that should not matter.

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" href="#ToolsID">Heading 1</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="ToolsID">
            <div class="list-group">
                <a asp-controller="TestCtrl" asp-action="TestAction" class="list-group-item">Click Here</a>
                <a href="#" class="list-group-item">Click Here</a>
            </div>
        </div>
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" href="#ReportsID">Heading 2</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="ReportsID">
            <div class="list-group">
                <a href="#" class="list-group-item">Click Here </a>
                <a href="#" class="list-group-item">Click Here</a>
            </div>
        </div>
    </div>
</div>

UPDATE

The Source View html in the browser looks as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ASP.NET Core Test App</title>    
        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/site.css" />   
</head>
<body>
    <div class="container navbar navbar-inverse navbar-fixed-top text-center">
        <img src="/images/nps.gif"><img src="/images/nps_txt.gif">
    </div>
    <div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;">

The same content as in the <div class="panel-group">....</div> shown in the post example above

<script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>

 <script>
   $('.list-group-item').click(function(e){ 
        e.stopPropagation();
    })
</script>
</body>
</html>

解决方案

Your HTML seems correct. If the version of Bootstrap you're using has binded the event listeners in a way that it's triggering it even when you click inside an anchor, you'll need to add your own JavaScript I'm afraid.

$('.list-group-item').click(function(e){ 
  e.stopPropagation();
})

Should work as per your needs.

这篇关于当您点击内部链接时，Bootstrap面板折叠会崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！