使用页眉和页眉文本折叠面板

Posted 2023-05-08

【中文标题】使用页眉和页眉文本折叠面板

【英文标题】：Collapse Panel Using Header and Header Text

【发布时间】：2020-01-20 14:39:12

【问题描述】：

我有一个使用以下 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-body 元素在哪里？如果您提供了一个完整的最小示例，这将有所帮助！

@ConstantinGroß 为完整性编辑

【参考方案1】：

对于任何潜在的未来读者，我解决此问题的方法是将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>

【讨论】：

注意：此解决方案不适用于 Internet Explorer，因为那里不支持 pointer-events。

【参考方案2】：

您需要删除<span class="panel-heading-text"> 标记。由于该标签在那里，当您单击文本时，您实际上是在单击该元素而不是 .panel-heading 元素。

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

【讨论】：

不幸的是，这并没有为我解决这个问题，尽管我看到它在你的代码的 sn-p 中工作。可能是另一个文件中的脚本导致了这个问题。

我会检查您的控制台是否有错误，因为我可以复制您在包含跨度时遇到的问题。此外，在您的问题代码中，您缺少第一个 div 的右引号。我仍然会将这个答案标记为已接受，因为它确实解决了这个问题。