Question

我有一个菜单按钮。单击时会出现菜单。目前点击我可以显示包含4个类别的整个菜单，但我想在第一次点击时只显示菜单标题，再次点击菜单标题时，应该出现特定的类别内容。

我如何实现这一目标

这是我的HTML

<div class="container-fluid dropdown_menu" style="display: none;" >
                <div class="row">
                    <div class="col-sm-3 menu_column">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Hospitals </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Diagnostics </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Clinics </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Alternative Health Care </span> </a> </li>
                            </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 menu_column">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Doctor Appointments </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Health Package booking </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Medical Test Scheduling </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Home Sample Collection </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Home Consultation </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Treatment Advice </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Ambulance </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Cab pick up </span> </a> </li>
                            </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 menu_column">
                        <div class="row">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Health News </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Reviews </span> </a> </li>

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

                    <div class="col-sm-3 menu_column" style="border: none;">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                        <div class="row" >
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Buzz Hospital app </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Buzz Pharma app </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Parenting app </span> </a> </li>

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

这是我的Jquery

$(document).ready(function () {
    $("#menu").click(function () {
        $(".dropdown_menu").toggle();
        $(".menu_content").css("display", "none");
    });
});

Answer 1

您可以查看以下链接，可能对您有所帮助。

Fiddle

    $(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
  });

    $('.head2').click(function() {
        $(this).siblings('.body2:first').toggle('slow')
  });

    $('.head3').click(function() {
        $(this).siblings('.body3:first').toggle('slow')
  });

    $('.head4').click(function() {
        $(this).siblings('.body4:first').toggle('slow')
  });
});

切换在另一个div内的Div（显示无）

1 个答案: