0

我有 3 个父 div 和 3 个子 div。当我单击父 div 等效子 div 应该可见。父和子等效列表。每当用户悬停第一个 div ul li 等效子 ul li 添加一些类（突出显示）。并且有时第二个 div 也像那样工作。对一个 div 对另一个没有影响。我在这里写了一些代码，它的某些部分工作正常。我想优化代码。是否有任何可能适用于此代码的哎呀。

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

代码

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

4

1 回答 1

1

您需要做的是将.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

于 2013-11-07T07:27:59.473 回答