Свернуть панель с помощью заголовка и текста заголовка

Question

У меня есть разборная панель, работающая в настоящее время с использованием следующего 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>

Однако это позволяет пользователю только щелкнуть заголовок панели, чтобы свернуть панель, что означает, что при нажатии на текствнутри заголовка панель не рухнет.Есть ли другой способ, которым я могу воспользоваться, чтобы пользователь мог щелкнуть в любом месте заголовка, включая текст, чтобы свернуть панель?

Answer 1

Для любых потенциальных будущих читателей я решил эту проблему, добавив style="pointer-events: none;" к промежутку, где хранился текст заголовка.

Если вы используете элемент span для добавления класса к тексту в заголовке сворачиваемой панели, это правильный способ сделать текст кликом.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><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>

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