Div нажмите и наведите эффект родительского на ребенка

Question

Div нажмите и наведите эффект родительского на ребенка

0

У меня есть 3 родительских div и 3 дочерних div. когда я нажал на родительский div, эквивалентный дочерний div, должен быть visible.both родительский и дочерний эквивалентный список. всякий раз, когда пользователь наводил 1-й div-эквивалентный дочерний элемент ul li, добавьте некоторый класс (выделить). и в то время как второй div также работает так. Не действует один div на другой. Я написал какой-то код, здесь какая-то часть работает нормально. Я хочу оптимизировать код. есть ли какие-либо ограничения для этого кода.

и некоторые из них ошибочны. есть ли способ сделать это без использования номера индекса

HTML-код

 <div class="myparent">
                        <div class="parent">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                            click here and hover and test-'s
                        </div>
                        <div class="parent">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>
    click here and hover and test-'s
                        </div>

                        <div class="parent"></div>

                    </div>

                    <div class="mychaild">
                        <div class="chaild" style="display:none">
                            <ul>
                                 <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                        </div>
                        <div class="chaild" style="display:none">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                        </div>
                        <div class="chaild" style="display:none"></div>
                    </div>

КОД JAVASCRIPT

$(document).ready(function() {
    $('.parent').click(function(e) {
        e.preventDefault();
        indexn = $('.parent').index(this);
        $('.chaild:eq(' + indexn + ')').show();
        $('.parent:eq(' + indexn + ') ul li').hover(function() {
            $(this).toggleClass('selected');
            chaildindex = $('.parent:eq(' + indexn + ') ul li').index(this);
            $('.chaild:eq(' + indexn + ') ul li:eq(' + chaildindex + ')').toggleClass('selected');
        });
    });
});

ДЛЯ БОЛЬШЕ ПОНИМАНИЯ http://codepen.io/sarath704/pen/cpKsJ

или http://jsbin.com/Aqidopi/1/edit

И дайте мне предложения, я новичок в JavaScript и программировании jQuery

sarath 07 нояб. 2013, в 07:35

Источник

0

Я не совсем понимаю ваш вопрос - имеете ли вы в виду, что, когда вы наводите курсор мыши на «тестовых» детей родителя, дети в соответствующем div также должны быть выделены, но у вас есть проблемы с достижением этого эффекта? Кроме того, ваш HTML-код недопустим в том смысле, что прямым потомком элемента <ul> может быть только <li> . Если вы хотите вложить <ul> в другой, сначала вам нужно будет вложить его внутри <li> .
Terry 07 нояб. 2013, в 07:05
0

при нажатии на родительский div должен появиться дочерний div. При наведении указателя родительского элемента div следует выделить проблему тестового элемента div (добавить класс).
sarath 07 нояб. 2013, в 07:07

Теги:

javascript

jquery

html5

1 ответ

Ещё вопросы

Я не совсем понимаю ваш вопрос - имеете ли вы в виду, что, когда вы наводите курсор мыши на «тестовых» детей родителя, дети в соответствующем div также должны быть выделены, но у вас есть проблемы с достижением этого эффекта? Кроме того, ваш HTML-код недопустим в том смысле, что прямым потомком элемента <ul> может быть только <li> . Если вы хотите вложить <ul> в другой, сначала вам нужно будет вложить его внутри <li> .
при нажатии на родительский div должен появиться дочерний div. При наведении указателя родительского элемента div следует выделить проблему тестового элемента div (добавить класс).

Terry · Accepted Answer · 2013-11-07T06-17-00.000Z

Вам нужно будет связать функцию .hover() вне события click, а не внутри нее:

$(document).ready(function() {
    $('.parent').click(function(e) {
        e.preventDefault();
        indexn = $('.parent').index(this);
        $('.chaild:eq(' + indexn + ')').show();
    });
    $('.parent ul li').hover(function() {
        $(this).toggleClass('selected');
        var liIndex = $(this).index(),
            parentIndex = $(this).parents('.parent').index();
        $('.chaild:eq('+parentIndex+') > ul > li:eq('+liIndex+')').toggleClass('selected');
    });

});

http://codepen.io/terrymun/pen/qzlfh

спасибо, это работает для меня. но я хочу немного больше что при наведении, если я нажму. в чайлде должно быть видно вложенное ul. (Menusel). и, пожалуйста, скажите мне, есть ли способ написать этот код без индексов, используя предопределенные методы jquery.
На самом деле я бы предложил клонировать родителя, чтобы у вас были одинаковые схемы меню.
структура та же, но во внутренней реализации много разных