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或更高版本。

DEMO

Answer 2

CODE

检查上面链接的参考....其他代码来自上面的链接

<强> 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>

如何在没有更改图像位置的情况下单击相应图像下方的文本？

2 个答案: