多级下拉菜单Jquery 1.9.1

时间：2013-07-13 13:10:05

标签： jquery html

多级下拉jquery菜单有轻微问题。我已经让下拉功能正常工作，但是当我将鼠标悬停在选项上时，菜单会一次又一次地适应，它会下拉并向右后退多次。我已经查看了一些教程，无法查看我出错的地方，我只能假设我已经使用了编码的小菜鸟问题。这里是http://jsfiddle.net/xiah01/6yePs/？

HTML 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
        <link href="stages.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="javascript.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Stages School Of Dance</title>

    </head>

    <body>
        <ul>
            <li id='home'><a href="index.html">Home</a>
            </li>
            <li id='courses'><a href="courses.html">Courses</a>
            </li>
            <li id='general'><a href="general.html">General</a>
            </li>
            <li id="gallery"><a href="gallery.html">Gallery and video</a>

                <ul class="years" style="display:none">
                    <li><a href="#">2009</a>
                        <ul class="yearmonths" style="display:none">
                            <li class="months"><a href="gallery2009january.html">January</a></li>
                            <li class="months"><a href="gallery2009march.html">March</a></li>                                
                            <li class="months"><a href="gallery2009december.html">December</a></li>                            
                            <li class="months"><a href="gallery2009january.html">January</a></li>
                            <li class="months"><a href="gallery2009march.html">March</a></li>                                

                        </ul>
                    </li>

                    <li><a href="#">2010</a></li>

                    <li><a href="#">2011</a></li>

                    <li><a href="#">2012</a></li>
                </ul>
            </li>
            <li id="venue"><a href="venue.html">Venue</a>
            </li>
            <li id="aboutus"><a href="about.html">About</a>
            </li>
        </ul>


        <div id="index1">
            <div class="slideshow">
                <img src="4.jpg" />
                <img src="2.jpg" />
                <img src="1.jpg" />
                <img src="3.jpg" />
                <img src="5.jpg" />
            </div>


            <div id="indexaboutus">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit condimentum mi id sodales. Mauris eu nisl nec nibh aliquam cursus ut quis lacus. Duis et erat non sem sollicitudin volutpat a eget lorem. Integer feugiat diam vitae odio auctor gravida. Nullam congue nisi nec felis tristique, id fringilla quam ullamcorper. Cras a sem at justo imperdiet sagittis sodales id eros. Cras tristique urna ipsum, vel sagittis tortor imperdiet ac. Duis volutpat lacus sem, et molestie risus dapibus vitae. Mauris convallis elit sed sapien consectetur fringilla. Nulla consectetur mollis libero, vel eleifend purus rutrum ut. Donec posuere velit leo, et facilisis est vehicula non. Aliquam vel turpis felis. Sed molestie orci sem, in lobortis dui tempor eu. Morbi tempor mauris et aliquam consequat.</p>
                <p>Cras id sodales tellus, ut euismod erat. Nunc mi lacus, lobortis nec metus in, laoreet vehicula enim. Fusce semper velit et augue viverra vulputate. Donec suscipit lorem sed nulla tincidunt sodales. Nullam vehicula arcu sapien, sit amet posuere augue tristique pellentesque. Integer sit amet pretium leo, non lobortis dolor. Vivamus sodales eget leo in rhoncus. Phasellus quis dolor faucibus, convallis metus eget, sodales diam. Nulla scelerisque, magna eget placerat gravida, neque ante fringilla enim, at aliquet tortor nibh accumsan quam. Pellentesque iaculis elementum dolor, sed facilisis felis scelerisque sit amet. Praesent aliquam diam erat, eu pellentesque magna blandit ut. Donec vulputate luctus tellus, at iaculis felis faucibus sit amet. Nam nec diam elit. Integer cursus varius ante, nec ullamcorper risus tristique eu. Fusce sed posuere sem.</p>
            </div>
        </div>


        <div class="logo">
            <img id="logo1" src="logo2.jpg" alt="Slideshow" />
        </div>
    </body>

</html>

Jquery的

$(function(){
$('#gallery').mouseover( function(){
    $('.years').slideDown();
});
$('.years').mouseleave( function(){
        $('.years').slideUp();

})
})

$(function(){
$('.years').mouseover( function() {
    $('.yearmonths').slideDown();

})
$('.yearmonths').mouseleave( function() {
    $('.yearmonths').slideUp();
})
})





            $(document).ready(function() {

                $('.slideshow').cycle({
                    fx: 'fade',
                    pause: 1,
                    prev: '#prev',
                    next: '#next'

                });
            });

CSS 

    /** RESET CSS **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Above is for resetting CSS */        


h1 {
        font-size:120%;
        font-weight:bold;
        }


/*index.html */   


        ul {
    list-style-type: none;
    vertical-align: top;
    margin:0 auto;
    width:80%;
    text-align:center;
}
li {
    display: inline-block;
    vertical-align: top;
    padding:3px 8px;
}

ul li {
    list-style-type: none;
    text-decoration:none;

}


A:link {text-decoration: none; color:dimgray; }
A:visited {text-decoration: none; color:dimgray;}
A:active {text-decoration: none; color:dimgray;}
A:hover {background-color:lightgrey; }

#home {
    font-weight:bold;
}
#courses {
    font-weight:bold;
}
#general {
    font-weight:bold;
}
#gallery li {
    font-weight:normal;
    display: block;
}
#gallery {
    font-weight:bold;
}
.years {
    padding:0%;
    position:relative;
    right:35%;
    width:100%;
}
.yearmonths {
    position:absolute;
    font-size:80%;
    top:5%;
    left:60%;
    width:100%;
}
#gallery > ul.years > li {
    padding:5%;
}

#venue {
    font-weight:bold;    
}

#aboutus {

    font-weight:bold;
}




#index1 {
    padding-top:1%;
    width:100%;
border-style:solid;
border-top:solid black;
}



.slideshow {
    float:right;
    margin-right:15%;
}

.slideshow img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;

}


#indexaboutus {
    width:25%;
    margin-left:15%;

}


.logo {
    clear:both;
    width:20%;
    margin-right:auto;
    margin-left:auto;
}

/* venue.html */

.banner {
    margin-left:auto;
    margin-right:auto;
    width:50%;
    padding:1%;

} 



#venuewidth {
    width:100%;
    margin-top:2%;
}

.aboutvenue {
    width:28%;
    float:left;
    text-align:center;
    margin-left:20%;
}



#map {
        float:right;
    width:28%;
        margin-right:20.5%;
}




/* aboutus.html */
.aboutus {
    margin-top:1%;
    width:50%;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:2%;
        border-radius: 6%;

border-style:solid;
border-top:thick black;

}




.aboutpositioning {
    width:51%;
    margin-left:auto;
    margin-right:auto;
    overflow: hidden;
}

.teacherphoto {
        width:25%;
        border-radius:5%;
        float:left;
        margin:1%;
}

.teachertext {
    margin:1%;

}

.teacher1 {
    padding-left:1%;
    margin-top:1%;
    width:44%;
    background-color:white;
    overflow:hidden;
    float:left;
        border-radius: 5%;
}


#aboutphoto {
    width:100%;
    vertical-align: bottom;
}




#contactinfo {
        clear:both;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
        border-style:inset;
        overflow: hidden;
    width:60%;
}

1 个答案:

答案 0 :(得分：0)

$(function () {
    $('#gallery').mouseover(function () {
    $('.years').slideDown();
  });
  $('#gallery').mouseleave(function () {
    $('.years').slideUp();
   })
})

<强> jsFiddle

相关问题
最新问题