Question

当你将鼠标悬停在父链接上时，我有一段JS突出显示了相应的子链接集。

但是现在，当我切换（单击）相应的父链接时，我还想让子链接突出显示。

另外，我希望一次只有一组儿童链接成为亮点。意思是，如果我点击“父母2”，父母1将关闭，父母2将打开。

希望这是有道理的......

这是我到目前为止的要点：

<script type="text/javascript">

    // Group 1
    $('#one').live('mouseover', function(){
        $('li.uno').addClass('highlight');
    });

    $('#one').live('mouseout', function(){
        $('li.uno').removeClass('highlight');
    }); 

    // Group 2
    $('#two').live('mouseover', function(){
        $('li.dos').addClass('highlight');
    });

    $('#two').live('mouseout', function(){
        $('li.dos').removeClass('highlight');
    }); 

    // Group 3
    $('#three').live('mouseover', function(){
        $('li.tres').addClass('highlight');
    });

    $('#three').live('mouseout', function(){
        $('li.tres').removeClass('highlight');
    }); 

</script>


            <ul><!-- Parent Links -->
                <li id="one">
                    <a href="#">Parent 1</a>                                    
                </li>

                <li id="two">
                    <a href="#">Parent 2</a>                                    
                </li>

                <li id="three">
                    <a href="#">Parent 3</a>                                    
                </li>           
            </ul>


            <ul><!-- Children -->       
                <li class="uno">
                    <a href="">Link<a/>
                </li>

                <li class="tres">
                    <a href="">Link<a/>
                </li>

                <li class="tres">
                    <a href="">Link<a/>
                </li>

                <li class="dos">
                    <a href="">Link<a/>
                </li>

                <li class="uno">
                    <a href="">Link<a/>
                </li>

                <li class="dos">
                    <a href="">Link<a/>
                </li>                               

            </ul>

谢谢你的帮助。

Answer 1

如果您希望使用大量元素，则选择元素并更改其类可能会很慢。同样，您可能不希望每次向文档添加新的父链接时都必须更新Javascript。

解决这个问题的一个好方法是更改父元素的单个类，并让CSS处理所有子元素的选择和样式。

我已经制定了一个解决方案，您可以demo at JSFiddle。

Answer 2

将一些类（“children”）添加到包含所有子ul的{{1}}容器中，然后尝试使用此代码。

li

<强> Demo

使用Javascript突出鼠标悬停上的子链接＆amp;切换

2 个答案: