当我单击面板栏本身上的按钮时，如何防止Kendo Panelbar折叠 [英] How to prevent Kendo Panelbar from collapsing when I click button which is places on the panelbar itself

问题描述

我有一个放在Kendo Panelbar上的按钮。我正在编写一个jQuery函数，以便当用户点击按钮面板栏时不会崩溃。我提出的其他逻辑是，单击按钮时没有回发。我不能让这个工作。帮助赞赏！ :)这是代码片段。

I have a button which is placed on Kendo Panelbar. I was writing a jQuery function so that when user clicks on the button panelbar does not collapse. Other logic that I put on is that there is no post-back when button is clicked. I can't get this to work. Help appreciated ! :) Here is the code snippet.

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

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

            }             
          });

推荐答案

我设法找到了一个解决方案你的问题是通过创建一个布尔变量来表示展开或折​​叠panelBar的可能性。当你点击按钮时，它将锁定面板。

I managed to find a solution for your problem by creating a boolean variable that represents the possibility to expand or collapse the panelBar. When you click the button, it will "lock" the panel.

然后，打开展开或折叠事件，它将检查此变量的值和 preventDefault 或不取决于它。

Then, on expand or collapse events, it will check this variable's value and preventDefault or not depending on it.

这是一个 小提琴

Here's a 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>

这篇关于当我单击面板栏本身上的按钮时，如何防止Kendo Panelbar折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！