我在使用菜单小部件时遇到问题。
我想要一个具有自定义布局作为内容的菜单项。与此演示中显示的内容非常相似：http ://demos.kendoui.com/web/menu/index.html
“商店”项目有一个自定义布局，当我点击里面时，菜单没有关闭，这是我想要的行为。但是如果我将下面显示的代码复制到我自己的项目中，当我点击里面时，菜单就会关闭......我不想要这种行为。
为什么这发生在我的项目中而不是演示示例中？我该如何解决这个问题？也许一些 javascript 库有冲突？
在具有常规项目的项目中，两者的行为是相同的......
代码（从演示页面复制）：
<div id="example" class="k-content">
<div id="megaStore">
<ul id="menu">
<li>
Products
<ul>
<li>
Furniture
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Tables & Chairs</li>
<li>Sofas</li>
<li>Occasional Furniture</li>
<li>Childerns Furniture</li>
<li>Beds</li>
</ul>
</li>
<li>
Decor
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Bed Linen</li>
<li>Throws</li>
<li>Curtains & Blinds</li>
<li>Rugs</li>
<li>Carpets</li>
</ul>
</li>
<li>
Storage
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<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> <!-- moving the UL to the next line will cause an IE7 problem -->
<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>
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">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 scoped>
#megaStore {
width: 600px;
margin: 30px auto;
padding-top: 120px;
background: url('../../content/web/menu/header.jpg') no-repeat 0 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;
}
</style>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
</div>