Question

在以下HTML页面中，Heading 1和Heading 2在第一次加载页面时正确折叠（因为我使用class="panel-collapse collapse"。然后Collapse/Expand正常工作用户点击Heading。但是当用户点击一个标题下的Heading内的链接时，标题会崩溃。我希望它在Heading内的链接时保持打开状态只有当用户点击标题而不是单击标题内的链接时，才会出现折叠/展开行为。我更倾向于使用JavaSctipt的解决方案。注意：我在ASP.NET Core中使用它使用Bootstrap 3.0进行项目 - 但这无关紧要。

<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>

更新

Source View html in the browser如下所示：

<!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>

Answer 1

您的HTML似乎是正确的。如果您正在使用的Bootstrap版本已经绑定了事件监听器，即使您在anchor内单击它也会触发它，您需要添加自己的JavaScript我很害怕。

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

应该按照您的需要工作。

单击其中的链接时，Bootstrap面板折叠折叠

1 个答案: