显示/隐藏信息jQuery

Question

单击cooresponding标题元素时如何显示信息？我试图使用div标签来保存信息，我不确定如何在点击时显示它。在这种情况下，单击披萨标题并在披萨div中显示信息。我是jQuery的新手，非常感谢任何帮助。感谢您的时间。

<h2>Pizza</h2>
<h2>Sandwiches</h2>
<h2>Other Items</h2>
<h2>Beverages</h2>

<br>

 <div id="pizza">
 <h3>PIZZA <span class="tab"></span> 10" &nbsp; 12" &nbsp; 14"</h3>
 <hr>
 <br>
 <p>
 <strong>Classic:</strong>
 Beef, Pepperoni, Onions & Mushrooms
 </p>
 <p>
 <strong>Palace:</strong>
 Sausage, Beef, Pepperoni, Onions & Mushrooms 
 </p>
 <p>
 <strong>Philly Steak:</strong>
 Seasoned Steak with Onions, Green Peppers on our
 Special White Sauce
 </p>
 <p>
 <strong>"B" Special:</strong>
 Sausage, Salami, Canadian Bacon & Onions
 </p>
 <p>
 <strong>Maverick:</strong>
 Sausage, Beef, Canadian Bacon & Pepperoni
 </p>
 </div>
 <div id="sandwich">



 $(document).ready(function(){
 $(this).click(function(){  
 $("h2").toggle();      
 });
 });

Answer 1

好：

要简单地解决您的问题，您只需要为您的元素添加id，然后从您的脚本中引用它：

HTML

<h2 id="showPizza">Pizza</h2>

<强> JS：

$(function(){
  $('#showPizza').click(function(){
    $('#pizza').toggle();
  });
})

$(function(){
  $('#showPizza').click(function(){
    $('#pizza').toggle();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 id="showPizza">Pizza</h2>
<h2>Sandwiches</h2>
<h2>Other Items</h2>
<h2>Beverages</h2>

<br>

 <div id="pizza" style="display:none;">
 <h3>PIZZA <span class="tab"></span> 10" &nbsp; 12" &nbsp; 14"</h3>
 <hr>
 <br>
 <p>
 <strong>Classic:</strong>
 Beef, Pepperoni, Onions & Mushrooms
 </p>
 <p>
 <strong>Palace:</strong>
 Sausage, Beef, Pepperoni, Onions & Mushrooms 
 </p>
 <p>
 <strong>Philly Steak:</strong>
 Seasoned Steak with Onions, Green Peppers on our
 Special White Sauce
 </p>
 <p>
 <strong>"B" Special:</strong>
 Sausage, Salami, Canadian Bacon & Onions
 </p>
 <p>
 <strong>Maverick:</strong>
 Sausage, Beef, Canadian Bacon & Pepperoni
 </p>
 </div>
 <div id="sandwich">

更好的

更简洁，就是添加data属性，然后在代码中进行匹配：

$(function(){
  $('.toggle').click(function(){
    var elem_id = '#' + $(this).attr("data-toggle");
    $(elem_id).toggle();
  });
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="toggle" data-toggle="pizza">Pizza</h2>
<h2 class="toggle" data-toggle="sandwich">Sandwiches</h2>

<div id="pizza" class="hidden">
 <h3>PIZZA <span class="tab"></span> 10" &nbsp; 12" &nbsp; 14"</h3>
 <hr>
 <br>
 <p>
 <strong>Classic:</strong>
 Beef, Pepperoni, Onions & Mushrooms
 </p>
 <p>
 <strong>Palace:</strong>
 Sausage, Beef, Pepperoni, Onions & Mushrooms 
 </p>
 <p>
 <strong>Philly Steak:</strong>
 Seasoned Steak with Onions, Green Peppers on our
 Special White Sauce
 </p>
 <p>
 <strong>"B" Special:</strong>
 Sausage, Salami, Canadian Bacon & Onions
 </p>
 <p>
 <strong>Maverick:</strong>
 Sausage, Beef, Canadian Bacon & Pepperoni
 </p>
 </div>
 <div id="sandwich" class="hidden">
next div...
</div>

Answer 2

我在下面创建了一个工作代码段。

我将数据类型属性添加到你的h2标签，以便脚本知道要定位的div id。 data-type属性必须与您尝试显示的ID匹配。

此脚本会将onclick事件应用于所有h2标记，而不必单独手动将其应用于每个标记。

$(document).ready(function(){
  $("h2").on('click', function(){
    var id = $(this).attr("data-type");
    $(".hidden").hide();
    $("#"+id+"").toggle();
  });
});

.hidden{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-type="pizza">Pizza</h2>
<h2 data-type="sandwich">Sandwiches</h2>
<h2 data-type="other">Other Items</h2>
<h2 data-type="beverage">Beverages</h2>

<div id="pizza" class="hidden">
    <h3>PIZZA <span class="tab"></span> 10" &nbsp; 12" &nbsp; 14"</h3>
    <hr>
    <br>
    <p><strong>Classic:</strong>Beef, Pepperoni, Onions & Mushrooms</p>
    <p><strong>Palace:</strong>Sausage, Beef, Pepperoni, Onions & Mushrooms</p>
    <p><strong>Philly Steak:</strong>Seasoned Steak with Onions, Green Peppers on our Special White Sauce</p>
    <p><strong>"B" Special:</strong>Sausage, Salami, Canadian Bacon & Onions</p>
    <p><strong>Maverick:</strong>Sausage, Beef, Canadian Bacon & Pepperoni</p>
</div>
<div id="sandwich" class="hidden">Sandwiches</div>
<div id="other" class="hidden">Other</div>
<div id="beverage" class="hidden">Beverages</div>