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