0

我的一个页面中有一个 jquery ui“选项卡”小部件，效果很好。选项卡水平显示，如“详细信息”“地址”，单击每个选项卡时，不同的内容显示如下

jQuery 选项卡

但现在我正在努力将这些选项卡更改为菜单。实际上，主菜单只有一个选项，例如：“员工”，当用户悬停员工时，一些新的子菜单将垂直打开，如“详细信息”、“地址”等，就像这里一样，很好而且平易近人：

jQuery 菜单

有了这个，我必须在不同的“子菜单”点击上显示不同的内容，因为标签在每次不同的点击上显示不同的内容。例如：如果单击“详细信息”子菜单，则与详细信息相关的 div 内容应显示，并且与其他子菜单相同。我一直在尝试，但无法在子菜单中添加内容。如何做到这一点？

我使用了 RRR 给出的相同的以下代码，但没有成功：

<div class="navbar">
        <ul id="menu">
            <li class="add">
               Employee
                <ul>
                    <li class="Emp_Details">Details</li>
                    <li class="Emp_Contacts">Contacts</li>
                    <li class="Emp_otherDetails">Other Details</li>

                </ul>
            </li>
        </ul>
    </div> 


<div class="content">


   <div class="Emp_Details">
            <div>
                <div>
                    <div class="adminWrapper">
                        <div class="common_outer">

                            <div class="margin-btm30">
                                <div class="shead clearfix">
                                    <h2 class="fLeft margin-top5">Details</h2>

</div>

</div>

</div>

</div>

</div>

</div>





  <div class="Emp_Contacts">
            <div>
                @{this.Html.RenderAction("Emp", "Address");}
            </div>
        </div>


<div class="Emp_otherDetails">
            <div>
                @{this.Html.RenderAction("Emp", "Emp_otherDetails");}
            </div>
        </div>




</div>


<style type="text/css">
    .ui-menu {
        width: 150px;
    }

    .navbar {
        width: 320px;
        float: left;
        height: 100%;
    }

    .content {
        width: 800px;
        float: left;
        height: 600px;
        border: 1px solid blue;
        padding: 10px;
    }

        .content div {
            height: 100%;
        }

            /*.content div:nth-child(even) {
            }

            .content div:nth-child(odd) {
            }*/
</style>




    $(function () {

        $("#menu").menu();

        $('.content div').hide();
        $('.content div').eq(0).show();

        $(document).on('click', '#menu li', function (e) {
            e.stopPropagation();
            if ($(this).children().length) {
                return false;
                console.log($(this).children().length);
            }
            var x = $(this).attr('class');
            x = x.substr(0, x.indexOf(' '));
            console.log(x);
            $('.content div').hide();
            $('.content div.' + x).show();
        });

    });
4

0 回答 0