Question

在我的页面中，我希望在元素悬停时显示子元素。你能帮助改善代码吗？

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #list a { text-decoration: none; color: green; margin-right: 30px; }
        #content { margin-top: 30px; }
        #content a { text-decoration: none;margin-right: 10px; }
        #content span.first1 { display: none; }
        #content span.first1 { display: none; }
        .show { display: inline; } 
    </style>
    <script src="../jquery-1.10.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#list a').hover(function() {
                hover_hidden()
            })
            function hover_hidden() {
                var length = $('#first a').length
                var str = '

                for(i=0; i<length; i++)  {
                    if ( i == 0) 
                        $('.first').show() 
                else {
                    $('#list a').eq(i).hover(function() {
                        $('.first').hide()
                        var str = '.first'
                        i += ''
                        var newdetail = str + i
                     //   alert(newdetail)
                        $("newdetail").addClass('show')
                    })
                }
            }

            }
        }) 
    </script>
</head>
<body>
    <div id="list">
        <a href="#">first</a>
        <a href="#">second</a>
        <a href="#">three</a>
    </div>
    <div id="content">
        <span class="first">
            <a href="#">first</a>
            <a href="#">first</a>
            <a href="#">first</a>
        </span>
        <span class="first1">
            <a href="#">second</a>
            <a href="#">second</a>
            <a href="#">second</a>
        </span>
        <span class="first2">
            <a href="">three</a>
            <a href="">three</a>
            <a href="">three</a>
        </span>
    </div>
</body>
</html>

我将代码放在http://jsfiddle.net/DVdAk/

Answer 1

尝试

$(document).ready(function() {
    var $spans = $('#content > span')
    $('#list a').mouseenter(function() {
        var index = $(this).index();
        $spans.filter(':visible').hide();
        $spans.eq(index).show();
    })
})

演示：Fiddle

Answer 2

$(function(){
            $('#list a').hover(hoverHidden);
            function hoverHidden() {
                var $activeItem = $(this);
                var $subMenu = $('#'+$activeItem.data('toggle'));
                $subMenu.show();
                $subMenu.siblings().hide();

            }

}）;

http://jsfiddle.net/DVdAk/1/

在小提琴中尝试这个

这不完美，但我知道你可以把它弄出来，我们的想法是使用data-属性来指示要显示的子手册

jQuery在a盘旋时显示元素

2 个答案: