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/

那说了一些建议：

不要使用<table>进行布局，除非您实际渲染属于表格的数据/内容。
尝试使用语义类名称。在DOM中的命令之后命名您的类没有实质意义。
将您的课程分组，以便他们可以重复使用。按钮共享哪些属性和功能？看起来你有重复的“主要”和“次要”等级......
您是否可以编写一个或两个可由不同元素重复使用的函数，而不必为每个按钮添加单独的单击处理功能？

通过替换Divs向下钻取导航菜单（笨拙）

1 个答案: