Question

我有一个jquery ui＆＃34;标签＆＃34;我的一个页面中的小部件完美地工作。标签水平显示为＆＃34;细节＆＃34; ＆＃34;地址＆＃34;点击每个标签，不同的内容就像这里一样显示

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

Jquery Menus

有了这个，我必须在不同的＆＃34;子菜单＆＃34;上显示不同的内容。点击，因为标签在每次不同的点击上显示不同的内容。例如：如果a＆＃34;详细信息＆＃34;单击子菜单，与细节相关的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();
        });

    });

如何在不影响页面及其内容的情况下将选项卡更改为菜单

0 个答案: