Javascript在多个图像下隐藏一个div

Question

我是 javascript 新手，遇到了一些麻烦。我正在尝试创建一个脚本，当单击小图片时，div 会滑动打开并提供图片中人物的简介。一行有 5 张图片，文本 div 位于每行的底部。

我试图确保如果再次单击同一个图像或下一行上的图像，则 div 关闭，但如果在同一行上单击另一个图像，则保持打开状态并切换到下一个描述，没有动画。

环顾四周后，我想出了这个。

JS。

<script>
$(function () {
    var tabContainers = $('div.tabs > div');
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).slideToggle("slow");
        tabContainers.hide().filter(this.hash).show();


        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});
</script>

CSS。

<style type="text/css">
UL.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
UL.tabNavigation LI {
    display: inline;
}
UL.tabNavigation LI A {
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
}
A.selected {
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 35px solid gray;
}
UL.tabNavigation LI A:focus {
    outline: 0;
}
div.tabs > div {
    padding: 5px;
    margin-top: 3px;
    border: 0 px solid #333;
}
div.tabs > div h2 {
    margin-top: 0;
}

HTML。

<div class="container">
  <div class="tabs">
    <ul class="tabNavigation">
      <li><a href="#alex"><img id="flip" src="{% static 'img/alex-headshot-stone.png' %}" alt="Photo of Alex Chamberlain" class="img-team img-thumbnail"/></a></li>
      <li><a href="#ed"><img id="flip" src="{% static 'img/ed_snajder.jpg' %}" alt="Photo of Ed Snajder" class="img-team img-thumbnail"/></a></li>
      <li><a href="#nicole"><img id="flip" src="{% static 'img/nicole-phelps.jpg' %}" alt="Photo of Nicole Phelps" class="img-team img-thumbnail"/></a></li>
    </ul>
    <div id="alex">
      <h3>Alex Chamberlain<span id=":14h" tabindex="-1"></span></h3>
      <p><b>Puppet Labs</b><br>
        Software Quality Assurance Engineer</p>
      <ul>
        <li>Linked-in: <a href="http://www.linkedin.com/pub/alex-chamberlain/35/9a/911">Alex Chamberlain</a></li>
      </ul>
      <br />
      <p>Alex Chamberlain has been involved in the process of software development in various capacities for almost twenty years, with a special interest in solving real-world problems by applying a thoughtful, user-centered approach to software design.  He has worked as a software engineer, business systems analyst, software tester, and college teacher of computer programming.  In his current position at Puppet Labs he is involved in all phases of testing Puppet Enterprise, an automated system-administration and configuration management tool, from high-level product-requirements analysis through hands-on manual testing.</p>
      <p> Currently he is focused on development of automated web application testing tools.  When not staring at a screen, he enjoys playing the guitar loudly and badly, cooking, taking care of his two elderly cats, and tinkering with vintage Japanese motorcycles.</p>
    </div>
    <div id="ed">
      <h3>Ed Snajder<span id=":14h2" tabindex="-1"></span></h3>
      <p><b>Jive Software</b><br>
        Staff DB Engineer</p>
      <ul>
        <li>Linked-in: <a href="http://www.linkedin.com/in/edinor">Ed Snajder</a></li>
        <li>O'Reilly Webcasts: <a href="http://www.oreilly.com/pub/au/5704">Ed Snajder</a></li>
      </ul>
      <p>Ed is the Database Administrator at Jive Software. He has been administering databases and analyzing data and  for over 10 years, and today finds himself working with PostgreSQL, MySQL, SQL Server and Oracle relational database engines, as well as HBase, Pig and other distributed technologies. He works on query and data structure design, performance optimization, systems configuration and troubleshooting for both internal and on-premises systems. </p>
      <p>When not having fun with databases, Ed is an aspiring hacker, with a self-built 3D printer, a couple of Raspberry Pis, and several mostly finished Arduino projects. An avid Portland tech community supporter, Ed has spoken at and participated in the PostgreSQL User Group, OSCON, Portland Code Camp, SQL Saturday and the Oregon SQL Developers' Group.</p>
    </div>
    <div id="nicole">
      <h3>Nicole Phelps<span id=":14h3" tabindex="-1"></span></h3>
      <p><b>Mash LLC</b><br>
        Software Developer</p>
      <ul>
        <li>Linked-in: <a href="https://www.linkedin.com/pub/nicole-phelps/46/79a/927">Nicole Phelps</a></li>
      </ul>
      <br />
      <p>Nicole is a software developer at Mash LLC in Portland, working on a project for Google. She wrote her first program as a sophomore at Oregon State University and, ever since, has become immersed in software development and entrepreneurship. While currently finishing her OSU degree in Computer Science with a focus on HCI, Nicole is starting the OSU App Challenge, a competition aimed at helping other students develop their technical skills and creativity. </p>
      <p>She has done mobile application development for OSU, Maps Credit Union, BuyBott, and Bioniq Health. Some development tools she enjoys using the most are Native iOS, Ruby on Rails, and Titanium development. When not on the computer, Nicole is usually playing volleyball or reading sci-fi/fantasy books.</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4" style="float:left"> <img src="{% static 'img/kelly.jpg' %}" alt="Photo of Kelly White" class="img-team img-thumbnail"/>
      <h3>Kelly White<span id=":14h" tabindex="-1"></span></h3>
      <p><b>Silvertail Software</b><br>
        President</p>
      <ul>
        <li>Building Apps for Windows Phone: <a href="http://www.winphonedev.me/">Kelly White</a></li>
        <li>Linked-in: <a href="https://www.linkedin.com/in/kellywhite">Kelly White</a></li>
      </ul>
      <br />
      <p>Kelly White is the President of Silvertail Software, a software consultancy specializing in XAML solutions for the Windows Phone and Windows 8 App Stores. He has over 13 years of industry experience building web applications, and has a passion for startups as a serial entrepreneur. Kelly has served on the organizing boards for the Portland Code Camp, Portland Startup Weekend, and the Oregon Game Project Challenge. He also founded and previously ran the Silverlight and Windows Phone user groups in Portland, Oregon.</p>
      <p> Kelly is a Microsoft MVP in Windows Phone Development, and speaks regularly at user groups, code camps, and other developer-related events throughout the Pacific Northwest on Windows Phone and Windows 8 App Development.</p>
    </div>
  </div>
</div>

这将匹配图像的正确文本并为我提供动画，但我不知道如何从隐藏的文本 div 开始，并且在单击下一张图像时不显示动画，或在再次单击图像时隐藏.

如果有人能指出我正确的方向，我将非常感激。

Answer 1

由于所有图像都丢失了，而且东西都在其他东西之上，所以我从头开始并按照您的指示:

Fiddle

我放入2行5张图像进行测试:

每个图像行都有类.people

每个图像都有类.person

每个bio行都有类.bios

每个bio都有类.bio

代码注释得很好:

$('.person').click(function() {

   // Get some info
   var openRow = ($('.bios:visible').index() - 1) / 2;      // Open Row #
   var openImage = $('.bios:visible .bio:visible').index(); // Open Image #
   var currentRow = $(this).parent().index() / 2;           // Clicked Row #
   var currentImage = $(this).index();                      // Clicked Image #

   // Hide all individual bios
   $('.bio').hide();
   // Show only the chosen bio
   $('.bios').eq(currentRow).children().eq(currentImage).show();

   // Hide all bios sets
   $('.bios').not(':eq(' + currentRow + ')').slideUp();
   // Show only the chosen bios set
   $('.bios').eq(currentRow).slideDown();

   // If the same image has been clicked
   if (openRow == currentRow && openImage == currentImage)
       $('.bios').eq(currentRow).slideUp();               // Then hide the set

});

希望这有帮助!