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

时间:2015-08-06 14:54:26

标签: javascript jquery kendo-ui kendo-panelbar

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

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

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

            }             
          });

2 个答案:

答案 0 :(得分:2)

我设法通过创建一个布尔变量找到解决问题的方法,该变量表示展开或折​​叠panelBar的可能性。当您单击按钮时,它将锁定"小组。

然后,在展开或展开事件时,它会根据它来检查此变量的值和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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

从您的按钮点击事件处理函数返回json_encode($post_all, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE);

false

从chiapas回答

更改了fiddle
相关问题