使用Javascript在鼠标上突出显示子链接&切换

Using Javascript to Highlight Child Links on Mouseover & Toggle

本文关键字：链接 amp 切换 显示 Javascript 鼠标 使用      更新时间：2023-09-26

我有一段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>

谢谢你的帮助。

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

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

我制作了一个解决方案，您可以在JSFiddle上进行演示

将一些类（"children"）添加到包含所有子li的ul容器中，然后尝试此代码。

$('#one').live('click', function(){
    $('ul.children li:not(.uno)').slideUp();
    $('ul.children li.uno').slideToggle();
    return false;
});
$('#two').live('click', function(){
    $('ul.children li:not(.dos)').slideUp();
    $('ul.children li.dos').slideToggle();
    return false;
});
$('#three').live('click', function(){
    $('ul.children li:not(.trees)').slideUp();
    $('ul.children li.trees').slideToggle();
    return false;
});

演示

相关文章：