的 DEMO

Question

onselect事件：当我点击这个时，这将改变我内部的元素类，如果我点击另一个，我之前的元素类将更改为原始。这是我的代码，但它不起作用。

<ul id="type_list">
    <li> <i class="fa fa-file-text-o" aria-hidden="true"></i>  file 1</li>
    <li> <i class="fa fa-file-text-o" aria-hidden="true"></i>  file 2</li>
</ul>
// onselect
 function onSelect(e) 
    {   
    $(e.item).find("> .k-link i.fa.fa-file-text-o").attr("class","fa fa-check");
     $(this).find("> .k-link i.fa.fa-check").attr("class","fa fa-file-text-o");

Answer 1

在onSelect中，首先将所有面板栏项重置为原始类，然后设置所选项的类（可以使用jQuery函数removeClass和addClass）：

function onSelect(e) 
{ 
   $("#type_list i.fa").removeClass("fa-check").addClass("fa-file-text-o");
   $(e.item).find("i.fa").removeClass("fa-file-text-o").addClass("fa-check");
}

的 DEMO

Answer 2

标题：

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

身体：

    <ul id="panelbar">
        <li>
           SECTION1
            <div>sdfsd sfjsdkfsd</div>
        </li>
        <li class="servicetable" id="side-by-side1">
            ENGINE
            <div>asdas asdasd</div>
        </li>
        <li class="servicetable" id="side-by-side2">
            TRANSMISSION
            <div>asdasdas asdasd</div>
        </li>
        <li>
            PERFORMANCE
            <div>There are three types of lists you can use, and this quick guide will show you how to use each. ... However, to create an ordered list, the ol tag is used rather than the ul tag. By ....</div>
        </li>
    </ul>

脚本： $（document）.ready（function（）{ $（“＃panelbar”）。kendoPanelBar（{ expandMode：“单个”

         });
     });

样式：

.servicetable { 垂直对齐：顶部; 边框：1px实线＃000； list-style：无； padding：2px; 宽度：49.2％; display：inline-block！重要 } div.k-content { 宽度：95vw; padding：5px！重要 } ＃side-by-side2 div.k-content { 左边距：-49vw; }

kendo panelbar onSelect事件

2 个答案:

的 DEMO