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>

这是网址---＆gt; 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/

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

1 个答案: