Использование Javascript для выделения дочерних ссылок при наведении курсора и переключении - PullRequest
Новая
       4

Использование Javascript для выделения дочерних ссылок при наведении курсора и переключении

0 голосов
/ 01 февраля 2012

У меня есть фрагмент 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>

Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 01 февраля 2012

Выбор элементов и изменение их классов может быть медленным, если вы ожидаете работать с большим количеством элементов. Точно так же вам, вероятно, не нужно обновлять Javascript каждый раз, когда вы добавляете новую родительскую ссылку в ваш документ.

Хороший способ решить эту проблему - изменить один класс родительского элемента и позволить CSS обрабатывать выбор и стилизацию всех дочерних элементов.

Я сделал решение, которое вы можете демо на JSFiddle .

0 голосов
/ 01 февраля 2012

Добавьте некоторый класс ("children") в контейнер ul, содержащий все дочерние элементы li, и попробуйте этот код. 

$('#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;
});

Demo

...