Question

我正在从XML文件生成导航菜单。一切正常，期待一个问题。

当生成菜单时，li节点（附有子节点和锚标签）将不会显示其文本（基于以下示例），如“Web Design”，“Development”。只显示列表样式图像时，它显示为空白。

但是，当我点击图像（'plusimageapply'）时，会显示子节点并显示文本“Web Design”。每个具有子节点和锚标记的子节点都会重复相同的问题。只有图像显示没有文字。如果展开节点，则会显示文本。

当折叠节点时，文本会再次消失。图像不受影响。

如果节点没有子节点或者节点没有像“Design”这样的锚链接示例，则不会发生此问题。

你能帮忙吗？我一直很疯狂，不知道为什么会这样。

我正在使用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;

}

Answer 1

非常简单，

你的第一个列表项只是子文本，因此它没有拾取显示：none样式，因为它是li元素的一部分。

然而，在你的第二个LI元素中，你正在为文本使用一个锚点，这是li的子元素，因此它正在拾取显示无样式，

javascript隐藏了所有孩子。

$（ 'li.category'）的儿童（）隐藏（）;

锚标签是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');                            
                    }
                }
            });
        }
    );

}）;

Answer 2

非常感谢Ryios。我对JQuery有点新意。你的回答对我有帮助。

对代码的一点修改

。

$（＆＃39; li.category＆＃39）的儿童（）隐藏（）过滤器（＆＃34;：第一子＆＃34）。。。显示（）;

Jquery：如果附加锚，则UL LI不显示文本

我正在使用IE 10。

2 个答案: