javascript - 显示/隐藏信息 jQuery

Question

当点击相应的标题元素时如何显示信息？我正在尝试使用 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>