切换位于另一个Div中的Div (display none)

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

你可以查看下面的链接，也许对你有帮助。

小提琴

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