table action menu

by Eric Miller

HTML

<table id="emailCountsTable" class="table" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th class="tc-name">Name</th>
            <th class="tc-date">Created</th>
            <th class="tc-qty">Quantity</th>
            <th class="tc-type">Type of List</th>
            <th class="tc-actions">Actions</th>
        </tr>
    </thead>
    <tbody>             
                <tr id="record-@trIndex" class="record-@trZebra">
                    <td class="tc-name">@record.Name</td>
                    <td class="tc-date">@Markup.ToTableFriendlyDate(record.Date.ToString()).ToString()</td>
                    <td class="tc-qty">@record.Quantity</td>
                    <td class="tc-type">@record.Type</td>
                    <td class="tc-actions">
                        <nav class="nav table-actions-nav">
                            <ul>
                                <li><a class="icon icon-cog table-actions-nav-icon" href="#">Actions</a>
                                    <ul class="table-actions-nav-menu hide">
                                        <li><a href="#">Restore Count</a></li>
                                        <li><a href="#">Order More</a></li>
                                        <li><a href="#">Delete</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
    </tbody>
</table>

CSS

.hide{
    display:none;
}

JavaScript

;
var $17 = $;

(function($) {
    var init = function() {
        $('.table-actions-nav').on('click', '.icon', function(e) {
            'use strict';
            e.preventDefault();
            var _self = this;

            console.debug('.table-actions-nav .icon.click()'); //@DEBUG
            $('.table-actions-nav li.active').removeClass('active');
            $('.table-actions-nav-menu').hide();

            $(_self).closest('li').addClass('active').children('.table-actions-nav-menu').slideDown();
        });

        console.debug('nav icon click set');
    };

    $(document).ready(init());
})($17);