Question

我从internet教程中删除了一个允许jquery滑动菜单的脚本。

菜单效果很好，但默认情况下会扩展第一个父链接。我希望默认关闭所有父菜单项。

这是javascript：

<script type="text/javascript">
$(function(){
    // hide all links except for the first
    $('ul.child:not(:first)').hide();
    $("a.slide:first").css("background-color","");
    // for image
    // $("a.slide:first").css("background-image","url('path')");

    $('ul.parent a.slide').click(function(){
        $('ul.parent a.slide').css("background-color","");

        $('ul.parent a.slide').hover(function(){
            $(this).css("background-color","");
        });

        $('ul.parent a.slide').mouseout(function(){
            $(this).css("background-color","");
        });

        $(this).mouseout(function(){
            $(this).css("background-color","");
        });

        $(this).css("background-color","");


        // slide all up
        $('ul.child').slideUp('slow');

        // show the links of current heading
        $(this).next().find('a').show();

        // slide down current heading
        $(this).next().slideDown('fast');

        // prevent default action
        return false;
    });
});

</script>

完整的页面代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(function(){
    // hide all links except for the first
    $('ul.child:not(:first)').hide();
    $("a.slide:first").css("background-color","");
    // for image
    // $("a.slide:first").css("background-image","url('path')");

    $('ul.parent a.slide').click(function(){
        $('ul.parent a.slide').css("background-color","");

        $('ul.parent a.slide').hover(function(){
            $(this).css("background-color","");
        });

        $('ul.parent a.slide').mouseout(function(){
            $(this).css("background-color","");
        });

        $(this).mouseout(function(){
            $(this).css("background-color","");
        });

        $(this).css("background-color","");


        // slide all up
        $('ul.child').slideUp('slow');

        // show the links of current heading
        $(this).next().find('a').show();

        // slide down current heading
        $(this).next().slideDown('fast');

        // prevent default action
        return false;
    });
});

</script>

<style type="text/css">

a
{
    //outline:none;
}

ul
{
    list-style:none;
}

ul.parent
{
    margin:0px;
}

ul.parent a
{
    display:block;
    //width:200px;
    //border-bottom:1px solid #336699;
    //background:#3399FF;
    //color:#FFFFFF;
    //font-weight:bold;
    //text-decoration:none;
    //padding:0px;
    //margin: 0;

}

ul.parent a:hover
{
    //color:#000000;
    //background:#66CC66
}

ul.child a
{
    //background:#333333;
    //color:#FFFFFF;
    //border-bottom:1px solid #f6f6f6;
    //font-weight:normal;
    //margin-left:-40px;
    //padding:7px;
    //width:200px;
    //display:block;
    //line-height:10px;
}

ul.child a:hover
{
    //color:#3333333;
    //background:#CCCCCC
}

</style>

</head>

<body>

    <ul class="parent">
        <li>
            <a href="#" class="slide"><img src="images/organisationbutton.png" border=0></a>            
            <ul class="child">
                <li><a href="#"><img src="images/personbutton2.png" border=0></a></li>
                <li><a href="#"><img src="images/jobsbutton2.png" border=0></a></li>

            </ul>

         </li>
    </ul>

    <ul class="parent">
        <li>
            <a href="#" class="slide"><img src="images/risksbutton.png" border=0></a>

            <ul class="child">
                <a href="#" class="slide"><img src="images/risksbutton3.png" border=0></a>
                <a href="#" class="slide"><img src="images/linkriskstojobsbutton.png" border=0></a>
                <a href="#" class="slide"><img src="images/linkhealthriskstopeople.png" border=0></a>
            </ul>

         </li>
    </ul>

    <ul class="parent">
        <li>
            <a href="#" class="slide"><img src="images/policiesbutton.png" border=0></a>

            <ul class="child">
                <a href="#" class="slide"><img src="images/trainingrequiredbylaw.png" border=0></a>
            </ul>

         </li>
    </ul>

    <ul class="parent">
        <li>
            <a href="#" class="slide"><img src="images/trainingbutton.png" border=0></a>

            <ul class="child">
                <a href="#" class="slide"><img src="images/trainingcoursesbutton.png" border=0></a>
                <a href="#" class="slide"><img src="images/medicalinterventionsbutton.png" border=0></a>
                <a href="#" class="slide"><img src="images/trainingdonebutton.png" border=0></a>
            </ul>

         </li>
    </ul>

    <ul class="parent">
        <li>
            <a href="#" class="slide"><img src="images/assessmentbutton.png" border=0></a>

            <ul class="child">
                <a href="#" class="slide"><img src="images/individualtrainingbutton.png" border=0></a>
                <a href="#" class="slide"><img src="images/departmentcompliancebutton.png" border=0></a>
            </ul>

         </li>
    </ul>



</body>
</html>

任何帮助都将一如既往地受到赞赏，我相信这有一个简单的解决方案，但我的javascript技能还处于起步阶段。

再次感谢， [R

Answer 1

可能只需删除这两行就可以了：

// hide all links except for the first
$('ul.child:not(:first)').hide();
$("a.slide:first").css("background-color","");

Answer 2

只需改变一下：

// hide all links except for the first
$('ul.child:not(:first)').hide();

用这个：

// hide all links
$('ul.child').hide();

jquery幻灯片菜单，默认情况下折叠所有菜单

2 个答案: