5
\$\begingroup\$

I made an attempt at a menu, that comprises of just replacing <div>s by showing and hiding. Kind of like a drill-down technique. I have the feeling that it is extremely long-winded. Can anyone offer a cleaner technique?

$(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;
});
table {
    text-align:center;
    width:80%;
    cursor:pointer;
}
tr {
    width:50%;
    background:red;
}
<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>

\$\endgroup\$
3
\$\begingroup\$

By dropping in some generic classes and data attributes like so:

<div class="menuItem menuContainer first" data-target="second">Choose a Department</div>
<div class="menuContainer second">
    <table class="Menu">
        <tr>
            <td>
                <div class="menuItem third" data-target="seventh">Technology</div>
            </td>
            <td>
                <div class="menuItem forth" data-target="sixth">Vehicles</div>
            </td>
        </tr>
    </table>
</div>

menuContainer marks everywhere that's needs to be hidden or shown

menuItem marks everything links somewhere else in the menu

data-target is your link data

Now you can reduce your javascript to this:

$(document).ready(function () {
    $('.menuContainer').hide();
    $('.first').show();

    $('.menuItem').click(function () {
        var target = $(this).attr("data-target")
        if(target){
            $('.menuContainer').hide();
            $('.'+target).show();
        }
        return false;
    });
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.