1

在我的页面中，我希望在元素悬停时显示子元素时产生效果。你能帮助使代码更好吗？

<!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/

4

2 回答 2

3

尝试

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

演示：小提琴

于 2013-07-25T03:27:29.463 回答
0 
$(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/

在小提琴中试试这个

这并不完美，但我知道你可以做到，这个想法是使用数据属性来指示要显示的子手册

于 2013-07-25T03:38:57.007 回答