当我单击位于面板栏本身上的按钮时，如何防止 Kendo 面板栏折叠

Question

我有一个按钮放在 Kendo 面板栏上。我正在写一个 jQuery 函数，这样当用户点击按钮时面板栏不会折叠。我提出的其他逻辑是单击按钮时没有 post-back。我无法让它工作。帮助赞赏！ :) 这是代码片段。

$("#panelBarCarDetails").kendoPanelBar({
        expandMode: "multiple"

        $('#btnTakeOwnership').click(function (e) {
            if (e.target) {
                e.preventDefault();

            }             
          });

Answer 1

我通过创建一个代表展开或折叠 panelBar 的可能性的布尔变量，设法找到了解决您的问题的方法。当您单击该按钮时，它将 "lock" 面板。

然后，在展开或折叠事件中，它将检查此变量的值，并根据它 preventDefault 或不检查它。

这里是fiddle

var canExpandCollapse = true;
 $(document).ready(function () {
     $("#panelbar").kendoPanelBar({
         expandMode: "multiple",
         collapse: cancelExpandCollapse,
         expand: cancelExpandCollapse
     });
 });

 function cancelExpandCollapse(e) {
     if (!canExpandCollapse) {
         e.preventDefault();
         canExpandCollapse = true;
     }
 }

 $("#wu").click(function (e) {
     canExpandCollapse = false;
 });

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-fiori.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.fiori.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

<div id="example">
    <ul id="panelbar">
        <li> <span class="k-link k-state-selected">My Teammates</span>

            <br/>
            <p>Some trash here</p>
            <p>Some trash here</p>
            <br/>
            <br/>
        </li>
        <li id="">Projects
            <button id="wu">Click me, I won't expand/collapse</button>
            <ul>
                <li>New Business Plan</li>
                <li>Sales Forecasts
                    <ul>
                        <li>Q1 Forecast</li>
                        <li>Q2 Forecast</li>
                        <li>Q3 Forecast</li>
                        <li>Q4 Forecast</li>
                    </ul>
                </li>
                <li>Sales Reports</li>
            </ul>
        </li>
        <li>Programs
            <ul>
                <li>Monday</li>
                <li>Tuesday</li>
                <li>Wednesday</li>
                <li>Thursday</li>
                <li>Friday</li>
            </ul>
        </li>
        <li>Communication</li>
    </ul>
</div>

Answer 2

Return false 形成你的按钮点击事件处理函数。

$('#btnTakeOwnership').click(function (e) {
        if (e.target) {
            e.preventDefault();
        }             
        return false;
      });

已从 chiapas 答案fiddle更改

当我单击位于面板栏本身上的按钮时，如何防止 Kendo 面板栏折叠

How to prevent Kendo Panelbar from collapsing when I click button which is places on the panelbar itself

javascript

jquery

kendo-ui

kendo-panelbar