Javascript 使用标题和标题文本折叠面板

我有一个可折叠的面板，目前正在使用以下HTML：

<div class="panel panel-entity panel-default>
    <div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
       <span class="panel-heading-text">@Model.RoleName</span>
    </div>
    <div class="panel-body">
        <div class="form-horizontal">
            <div class="entity">
                @*A bunch of form groups*@
            </div>
        </div>
    </div>
</div>

---

您需要删除
标记。由于该标记在那里，当您单击文本时，实际上是在单击该元素，而不是
.panel标题
元素



@罗勒烯模型
@*一组表单组*@
对于未来的潜在读者，我解决这个问题的方法是将
style=“pointer events:none；”“
添加到存储标题文本的范围中

如果使用span元素将类添加到可折叠面板标题内的文本中，这是使文本单击的正确方法




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-entity panel-default">
   <div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
      <span class="panel-heading-text" style="pointer-events: none;">@Model.RoleName</span>
   </div>
   <div class="panel-body">
      <div class="form-horizontal">
         <div class="entity">
            @*A bunch of form groups*@
         </div>
      </div>
   </div>
</div>


@罗勒烯模型
@*一组表单组*@
标记中的.panel body元素在哪里？如果您提供一个完全有效的示例，这将非常有帮助@康斯坦丁罗（ConstantinGroß）为Completenes编辑，但这并没有为我修复它，尽管我在您的代码片段中看到它在工作。可能是另一个文件中的脚本导致了此问题。我会检查您的控制台是否有错误，因为我可以复制您在包含span时遇到的问题。此外，在问题的代码中，您缺少第一部分的结束引号。我仍然会将此答案标记为已接受，因为它确实解决了此问题。注意：此解决方案不适用于Internet Explorer，因为那里不支持
指针事件。