Question

我按照了一个很好的例子，说明如何在点击here上显示/消失子菜单并使其正常工作。因为我刚刚开始使用javascript，所以取得了相当大的成就。但正如我使其工作时出现了一些其他问题，我将尝试解释：

1.-我有一个垂直主菜单和其中一个选项，'产品'有一个子类别，在父项目下方悬停时打开。选择其中一个子类别时，较大的菜单会显示在主菜单右侧的新div中。发生这种情况时，选定的子类别会更改颜色并显示项目符号，以便用户知道他们正在查看哪个子类别。我这样做是使用PHP来检测当前页面并分配一个“活动”ID。但是，当我这样做时，子菜单显示/隐藏不起作用，并且所有选项在首次进入页面时都显示。所以我将链接引用从“page.php”更改为“＃”---这更有意义，因为该选项不是一个链接，而只是显示另一个子菜单但必须包含它为了显示'活动'id ---现在显示/隐藏工作除了我点击一个子类别后，右边的菜单打开，但是先前选择的在悬停时打开的子类别关闭，php检测功能没有不行，因为我将引用更改为“＃”并且链接没有显示“活动”状态;事实上，即使第二个div已经显示，'home'选项也会保持选中状态。

我知道这听起来令人困惑。 Here's这个例子，我希望我很清楚我正在做什么。如果有人知道解决方法，我会很感激。

2.-一旦我能解决这个问题，有没有办法让第二个div从左向右滑动而不是淡入？

提前致谢：）

Answer 1

查看我对您的代码的更新.. http://jsfiddle.net/Jaybles/tkVfX/4/

<强> CSS

.mainNav {
    float: left;
    width: 200px;
    height: 100%;
    min-width: 150px;
    background-color: #e21a22;
}
.active{
 font-weight:bold;
}
.mainSide {
    font-size: 14px;
    list-style: none;
    font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
    padding-top: 40px;
    width: 143px;
    margin-right: auto;
    margin-left: auto;
}

.mainSide li a, .mainSide li {
    color: #fff;
    width: 143px;
    display: block;
    padding: 2px 0 2px 0;
    text-decoration: none;
}

.mainSide ul li a {
    width: 125px;
    list-style: none;
    padding: 6px 0 2px 18px;
}

.mainSide li a:hover {
    color: #fdb046;
}

.mainSide li a#active, .mainSide ul li a#active {
    color: #fdb046;
    background: url("../img/bullet.jpg") right center no-repeat;
}

#subNavSys, #subNavApp, #subNavAcc {
    float: left;
    width: 200px;
    height: 100%;
    min-width: 150px;
    background-color: #414143;
    display:none;
}

#subSideSys, #subSideApp, #subSideAcc {
    font-size: 14px;
    list-style: none;
    font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
    padding-top: 163px;
    width: 143px;
    margin-right: auto;
    margin-left: auto;
}

#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
    color: #fff;
    width: 143px;
    display: block;
    padding: 2px 0 2px 0;
    text-decoration: none;
}

#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
    color: #fdb046;

<强> HTML

<div class="mainNav">
        <a href="index.php"><img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" /></a>
        <ul class="mainSide">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About us</a></li>
            <li>Products
                <ul>
                    <li><a href="#" id="sys">By system</a></li>
                    <li><a href="#" id="app">By application</a></li>
                    <li><a href="#" id="acc">Accesories</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="subNavSys">

        <ul id="subSideSys">
            <li><a href="#">Sub-menu-1.1</a></li>
            <li><a href="#">Sub-menu-1.2</a></li>
            <li><a href="#">Sub-menu-1.3</a></li>
        </ul>
    </div>

    <div id="subNavApp">
        <ul id="subSideApp">
            <li><a href="#">Sub-menu-2.1</a></li>
            <li><a href="#">Sub-menu-2.2</a></li>
            <li><a href="#">Sub-menu-2.3</a></li>
        </ul>
    </div>

    <div id="subNavAcc">
        <ul id="subSideAcc">
            <li><a href="#">Sub-menu-3.1</a></li>
            <li><a href="#">Sub-menu-3.2</a></li>
            <li><a href="#">Sub-menu-3.3</a></li>
        </ul>
    </div>

<强> JS

$(document).ready(function(){

    $("#sys").click(function() {

        $("#subNavApp").hide();
        $("#subNavAcc").hide();
        $("#subNavSys").fadeIn(800);
        $('*').removeClass('active');
        $(this).addClass('active');
    });

    $("#app").click(function() {
        $("#subNavSys").hide();
        $("#subNavAcc").hide();
        $("#subNavApp").fadeIn(800);
        $('*').removeClass('active');
        $(this).addClass('active');
    });
    $("#acc").click(function() {
        $("#subNavSys").hide();
        $("#subNavApp").hide();
        $("#subNavAcc").fadeIn(800);
        $('*').removeClass('active');        
        $(this).addClass('active');        
    });
});

单击子菜单显示/隐藏的问题

1 个答案: