单击时如何在不更改图像位置的情况下在相应图像下方显示文本？

Question

我的图像彼此并排显示，当我单击特定图像时，其说明应显示在下面，而不会更改其他图像的位置。 我的代码是这样的：

<div class="team">
  <h3>OUR TEAM</h3>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name1</h4>
  </div>
  <div class="content">
    Img 1 description texttexttexttexttexttexttexttexttext
  </div>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img  src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name2</h4>
  </div>
  <div class="content">
    Img 2 description texttexttexttexttexttexttexttexttext
  </div>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name3</h4>
  </div>
  <div class="content">
    Img 3 description text text text text text text text text
  </div>
</div>

jQuery代码：

   $(document).ready(function () {
     var $content = $(".content").hide();
     $(".toggle").on("click", function (e) {
        $(this).toggleClass("expanded");
        $(this).next().slideToggle();
     });
     });

http://jsfiddle.net/pnhLyjb6/

Answer 1

将您的JavaScript代码替换为：

$(document).ready(function () {
    var $content = $(".content").hide();
    $(".toggle").click(function (e) {
        $(this).toggleClass("expanded");
        $(this).next().slideToggle();
    });
});

或者使用JQuery版本1.7或更高版本。

演示

Answer 2

码

检查上面的链接以获取参考...其他代码从上面的链接中获取

的HTML

  <div class="list-group">
  <a href="#section-1" id="section-1" class="list-group-item">img 1 </a>
  <a href="#section-2" id="section-2" class="list-group-item">img 2</a>
  <a href="#section-3" id="section-3" class="list-group-item">img 3</a>
  </div>

   <div class='hide section-1'>1</div>
   <div class='hide section-2'>2</div>
   <div class='hide section-3'> 3</div>