提前感谢任何阅读/提供解决方案的人。
我目前正在重建我的投资组合网站，但遇到了一个不会破坏网站但没有正确构建的小问题，这些问题令人不快。
问题：当用户单击项目时，描述从隐藏状态滑落。当用户点击同一行的另一个项目时，它基本上会尝试关闭当前项目，然后快速打开新项目，半秒钟后，项目开始隐藏，然后再次展开，创建一个有趣的类似“反弹”的效果。
理想情况下，我希望仅显示同一行上的任何项目，而无需更改任何点的高度。
代码：HTML
<section class="personal">
<header class="header">
<nav class="nav">
<ul class="nav-bar">
<li><a class="p" href="#">p</a></li>
<li><a href="mailto:im@pbj.me" data-icon="a"></a></li>
<li><a href="http://www.github.com/patrickbjohnson" target="_blank" data-icon="g"></a> </li>
<li><a href="http://www.twitter.com/patrickbjohnson" target="_blank" data-icon="t"></a></li>
</ul>
</nav>
</header>
<h1>Johnathan Doesmith</h1>
<h2>Cras Purus Quam</h2>
<h3>Cras purus</h3>
</section>
<section class="work">
<ul>
<li class="project">
<img src="img/image1.jpg">
<a href="#">Project Name</a>
<div class="description">
<h1>Project Name 1</h1>
<h2>Project website</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<button>visit site</button>
</div>
</li>
<li class="project">
<img src="img/image1.jpg">
<a href="#">Project Name</a>
<div class="description">
<h1>Project Name 1</h1>
<h2>Project website</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<button>visit site</button>
</div>
</li>
<li class="project">
<img src="img/image1.jpg">
<a href="#">Project Name</a>
<div class="description">
<h1>Project Name 1</h1>
<h2>Project website</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<button>visit site</button>
</div>
</li>
<li class="project">
<img src="img/image1.jpg">
<a href="#">Project Name</a>
<div class="description">
<h1>Project Name 1</h1>
<h2>Project website</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<button>visit site</button>
</div>
</li>
</ul>
</section>
jQuery：
$('.project > a').click(function(event){
// variables
var $this = $(this);
var $project = $('.project');
var $target = $project.filter($this.parent());
// stop link jump from happening
event.preventDefault();
// $target.addClass('open') *****
// removes 'open' class from all elements except
// for the parent ('li') of the clicked element
$('.open').not($target).removeClass('open');
if ($target.hasClass('open')) {
// if the target has the class, remove it.
$target.removeClass('open');
// what is 'return false supposed to do in this instance?'
return false;
} else {
// if the target doesn't have the class, then add it.
$target.addClass('open');
return false;
}
});