我是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而不是动画时单击下一个图像或隐藏时图像是再次点击。
如果有人能指出我正确的方向，我真的很感激。
答案 0 :(得分：1)
我修改了你的JS，所以它会起作用。评论是内联的
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
if ($(this).hasClass('selected')) { // this checks if this is selected, and hide section if it was already selected tabContainers.hide();
$(this).removeClass('selected');
}
else { // this is when it is not selected
if (tabContainers.is(":visible")) { // if it is visible already, hide others and show current section without animation
tabContainers.hide().filter(this.hash).show();
}
else {
// it is not visible already, do your cool animation
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(); // don't click the first one on load
// hide tab containers on load
tabContainers.hide();
});
我也在JS Fiddle http://jsfiddle.net/8VBfW/
上发布了它答案 1 :(得分：1)
由于所有图片都丢失了，而且其他东西都是其他东西，我从头开始并根据您的指示：
我输入 2行5张图片进行测试：
每个图像行都有类.people
每个图片都有类.person
每个生物行都有类.bios
每个 bio 都有类.bio
代码评论很好：
$（＆＃39; .person＆＃39;）。点击（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}）;
希望这有帮助！