Div click and hover effect parent to child

Question

i have 3 parent div's and and 3 child div's . when i clicked on parent div equivalent child div should visible.both parent and child equivalent list. whenever user hover the 1'st div ul li equivalent child ul li add some class(highlight). and at a time second div's also work like that.not effect to one div to another. i wrote some code here it's some part working fine. i want optimize code . is there any may apply oops for this code.

and some is buggy . is there any way to do this with out using getting index number

HTML CODE

 <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 CODE

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

FOR MORE UNDERSTANDING http://codepen.io/sarath704/pen/cpKsJ

or http://jsbin.com/Aqidopi/1/edit

AND give me suggestions i am new to JavaScript and jQuery programming

Answer 1

What you will need to do is to bind the .hover() function outside of the click event, not inside it:

$(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