jquery - ページとそのコンテンツに影響を与えずにタブをメニューに変更する方法

Question

私のページの1つに完全に機能するjquery ui「タブ」ウィジェットがあります。タブは「詳細」「アドレス」のように水平に表示され、各タブをクリックすると、ここのように異なるコンテンツが表示されます

Jquery タブ

しかし、現在、これらのタブをメニューに変更する作業を行っています。実際には、「従業員」などのメインメニューのオプションは1つしかありません。ユーザーが従業員にカーソルを合わせると、「詳細」、「住所」などのいくつかの新しいサブメニューが垂直に開きます。 :

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();
        });

    });