在不同的类中显示/隐藏不同的 div Onclick

Question

当我点击一个类的超链接时，我试图调用不同的 div 来显示或隐藏。问题是，当单击另一个超链接时，我无法让一个消失。我知道它在 .Toggle 中，但我不知道该怎么做。提前感谢您的帮助。

HTML：

<div class="menu-container">
         <div class="left">
       <?php if (have_rows('menu_items')): 
         while (have_rows('menu_items')): the_row(); ?>
         <a href="#/"><div id="<?php the_sub_field('menu_id'); ?>" class="menu-item"><?php the_sub_field('menu_item'); ?></div></a>

       <?php endwhile;
     endif; ?>
   </div>
     <div class="food-container">
       <?php if (have_rows('food_items')):
         while (have_rows('food_items')): the_row(); ?>
       <div id ="<?php the_sub_field('food_id'); ?>">
         <div class="food-item-container">
      <div class="food"> <h3><?php the_sub_field('food_name'); ?></h3>
       <?php the_sub_field('food_description'); ?>
     </div><div class="price"><?php the_sub_field('price'); ?></div>
   </div>
       <div class="clear"></div>
       <?php endwhile;
     endif; ?>
       </div>

Javascript：

<script>
$(document).ready(
    function() {
        $("#menu-item1").click(function() {
            $("#food_id1_1, #food_id1_2, #food_id1_3, #food_id1_4, #food_id1_5, #food_id1_6").fadeToggle();

        });
        $("#menu-item2").click(function() {
            $("#food_id2_1, #food_id2_2, #food_id2_3, #food_id2_4, #food_id2_5, #food_id2_6").fadeToggle();

        });
    });
    </script>

这是网址--->http://dev.the-end-zone.com/menu/

Answer 1

我相信您想要切换单个菜单项以及在切换另一个菜单项时您想要隐藏之前打开的菜单项

你可以这样做：

示例 HTML：

<a id="a1" href="javascript:;">CLick 1</a>
<div id="f1" class='fdiv'>F1</div>
<br/>
<a id="a2" href="javascript:;">CLick 2</a>
<div id="f2" class='fdiv'>F2</div>

jQuery:

 $(document).ready(function(){
  $("#a1").click(function(){
    $("#f2").hide();
    $("#f1").toggle();
  });

  $("#a2").click(function(){
   $("#f1").hide();
   $("#f2").toggle();
  });
});

https://jsfiddle.net/sandenay/L06LtLfz/