javascript - 通过替换 Divs(笨拙的)向下钻取导航菜单

Question

我尝试了一个菜单，其中包括通过显示和隐藏来替换 div。有点像向下钻取技术。感觉特别啰嗦，因为我是菜鸟。谁能提供更清洁或更漂亮的技术。我错过了重点吗？

谢谢

参见 fiddle

HTML

<div class="first">Choose a Department</div>
<div class="second">
    <table class="Menu">
        <tr>
            <td>
                <div class="third">Technology</div>
            </td>
            <td>
                <div class="forth">Vehicles</div>
            </td>
        </tr>
    </table>
</div>
<div class="seventh">
    <table class="Menu">
        <tr>
            <td>
                <div class="all"><a>Headphones</a>

                </div>
            </td>
            <td>
                <div class="all"><a>Watches</a>

                </div>
            </td>
            <td>
                <div class="nineth">Back</div>
            </td>
        </tr>
    </table>
</div>
<div class="sixth">
    <table class="Menu">
        <tr>
            <td><a>Engine-Powered</a>

            </td>
            <td><a>Human-Powered</a>

            </td>
            <td>
                <div class="fifth">Back</div>
            </td>
            <td>
                <div class="eighth">Top</div>
            </td>
        </tr>
    </table>
</div>

JS

$(document).ready(function () {
    $('.first').show();
    $('.second, .all, .seventh, .sixth').hide();

    $('.first').click(function () {
        $('.first, .second').hide();
        $('.second').show();
        return false;
    });
});


$('.third').click(function () {
    $('.second').hide();
    $('.all, .seventh').show();
    return false;
});


$('.forth').click(function () {
    $('.second').hide();
    $('.sixth,.eighth').show();
    return false;
});


$('.fifth').click(function () {
    $('.fifth, .sixth').hide();
    $('.second').show();
    return false;
});


$('.nineth').click(function () {
    $('.seventh, .nineth').hide();
    $('.second').show();
    return false;
});

$('.eighth').click(function () {
    $('.sixth, .fifth').hide();
    $('.second').show();
    return false;
});

CSS

table {
    text-align:center;
    width:80%;
    cursor:pointer;
}
tr {
    width:50%;
    background:red;
}

Answer 1

首先，这类问题更适合https://codereview.stackexchange.com/

也就是说，一些建议:

1. 不要使用 <table>出于布局目的，除非您实际呈现属于表格的数据/内容。
2. 尝试使用语义类名。按照 DOM 中的顺序命名您的类没有实质意义。
3. 对您的类(class)进行分组，以便它们可以重复使用。这些按钮共享哪些属性和功能？看起来你有重复的“主要”和“次要”级别......
4. 不必为每个按钮添加单独的点击处理函数，有没有一种方法可以编写一个或两个可由不同元素重用的函数？