我正在使用 Kendo 来渲染 li 在他们的 menu widget 中的演示。因为其中一个菜单项本身恰好是一个操作图标，所以我很难删除它旁边出现的下拉图标箭头。 Kendo 的示例仅使用文本标题，而不是图标，因此我不确定如何从该操作按钮菜单项中删除下拉图标。
通常通过 css 的 display: none setting 删除箭头，但将其应用于带有图标的类名也只会隐藏图标，我们使用 Less.js 来呈现 CSS 样式
我已经完成了 li .k-icon { display: none; } 的多种变体
没有成功。有人有这方面的经验吗？
【问题讨论】：
你可以看看下面的演示。
我在菜单中的两个 li 元素上放置了一个名为 hide-arrow 的类，装饰和商店。
我还添加了以下样式：
.hide-arrow>.k-menu-link>.k-menu-expand-arrow>.k-menu-expand-arrow-icon {
display: none;
}
注意：此方法适用于某些版本的 kendo-ui 库，但如果它们具有不同的内部结构，则可能会在其他版本中中断。如果您决定更新库，则必须更新选择器以适应新的元素层次结构（如果它确实发生了变化）。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/menu/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-main.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="megaStore">
<ul id="menu">
<li>
Products
<ul>
<li>
Furniture
<ul>
<li>Tables & Chairs</li>
<li>Sofas</li>
<li>Occasional Furniture</li>
<li>Children's Furniture</li>
<li>Beds</li>
</ul>
</li>
<li class="hide-arrow">
Decor
<ul>
<li>Bed Linen</li>
<li>Throws</li>
<li>Curtains & Blinds</li>
<li>Rugs</li>
<li>Carpets</li>
</ul>
</li>
<li>
Storage
<ul>
<li>Wall Shelving</li>
<li>Kids Storage</li>
<li>Baskets</li>
<li>Multimedia Storage</li>
<li>Floor Shelving</li>
<li>Toilet Roll Holders</li>
<li>Storage Jars</li>
<li>Drawers</li>
<li>Boxes</li>
</ul>
</li>
<li>
Lights
<ul>
<li>Ceiling</li>
<li>Table</li>
<li>Floor</li>
<li>Shades</li>
<li>Wall Lights</li>
<li>Spotlights</li>
<li>Push Light</li>
<li>String Lights</li>
</ul>
</li>
</ul>
</li>
<li class="hide-arrow">
Stores
<ul>
<li>
<div id="template" style="padding: 10px;">
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
<button class="k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md">See full list</button>
</div>
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Company
</li>
<li>
Events
</li>
<li disabled="disabled">
News
</li>
</ul>
</div>
<style>
#megaStore {
max-width: 600px;
margin: 30px auto;
padding-top: 120px;
background: url('../content/web/menu/header.jpg') no-repeat center 0;
}
#menu h2 {
font-size: 1em;
text-transform: uppercase;
padding: 5px 10px;
}
#template img {
margin: 5px 20px 0 0;
float: left;
}
#template {
width: 380px;
}
#template ol {
float: left;
margin: 0 0 0 30px;
padding: 10px 10px 0 10px;
}
#template:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#template .k-button {
float: left;
clear: left;
margin: 5px 0 5px 12px;
}
.hide-arrow>.k-menu-link>.k-menu-expand-arrow>.k-menu-expand-arrow-icon {
display: none;
}
</style>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
</div>
</body>
</html>【讨论】：