我正在从一个XML文件生成导航菜单。除了一个问题，一切都很好。
生成菜单时，li节点(带有子节点和附加的锚点标记)将不会显示其文本(基于以下示例)，如"Web设计"、"开发"。只有显示列表样式的图像时，它才会显示为空白。
但是，当我点击图像("plusimageapply")时，会显示子节点，并显示文本"Web设计"。对于每个具有子节点和锚点标记的子节点，都会重复出现相同的问题。只有图像显示而没有文本。若节点展开，则会显示"文本"。
当节点折叠时，"文本"将再次消失。图像不受影响。
如果节点没有子节点，或者节点没有类似"设计"的锚链接示例，则不会出现此问题。
你能帮忙吗。我一直疯了，不知道它为什么会这样。
我正在使用IE 10
HTML菜单布局：
<div id=Menu>
<ul>
<li class="category">Design
<ul>
<li><A href="url..." target="somelocation">Graphic Design </A></li>
<li class="category"><A href="url..." target="somelocation">Web Design </A>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Print</li>
</ul>
</li>
<li class="category"><A href="url..." target="somelocation">Development</A>
<ul>
<li>PHP</li>
<li>Java</li>
</ul>
</li>
</ul>
</div>
----------------------------------------------------------------
jQUERY: ( used from site:http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery)
// JavaScript Document
$(document).ready(function () {
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function (column) {
$(this).click(function (event) {
if (this == event.target) {
if ($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else {
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});
----------------------------------------------------------------------------------
CSS:
.plusimageapply
{
list-style-image: url(../Images/cicon12.png);
cursor: pointer;
vertical-align:middle;
}
.minusimageapply
{
list-style-image: url(../Images/cicon2.png);
cursor: pointer;
vertical-align:middle;
}
.selectedimage
{
list-style-image: url(../Images/cicon9.png);
cursor: pointer;
vertical-align:middle;
}
真的很简单，
您的第一个列表项只是子文本，因此它不会显示：none样式，因为它是li元素的一部分。
然而，在您的第二个LI元素中，您正在为文本使用一个锚点，这是LI的一个子元素，因此它会选择display none样式，
javascript隐藏了所有的子级。
$('li.category').children().hide()；
锚标签是li.category的子标签。
要修复它，您需要使javascript不选择列表项的第一个锚点。
这是一个有效的新版本，但你可能想修改它以实现另一种方式，我使用的选择器可能不适用于旧的浏览器，
$(document).ready(function()｛
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
//$('li.category').children().hide();
$('li.category:not(:first-child)).hide();
$('li.category').each(
function (column) {
$(this).click(function (event) {
if (this == event.target) {
if ($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else {
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
})
非常感谢Ryios。我对JQuery有点陌生。你的回答帮助了我。
对代码做一点修改
$('li.category').children().hide().filter("：第一个孩子").show()；