Div 单击和悬停效果父级到子级

我有 3 个父div 和 3 个子div . 当我单击父div 时，等效子div 应该可见。父级和子级等效列表。每当用户将鼠标悬停在 1'stdiv ul li 等效子级 ul li 添加一些类（突出显示）时。在某个时候，第二个div也是这样工作的，对一个div对另一个div没有影响。我在这里写了一些代码，它的某些部分工作正常。我想要优化代码。是否有任何可以对此代码应用 OOP。

有些是越野车. 有没有办法不使用获取索引号来做到这一点

网页代码

 <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编程的新手

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