Question

提前感谢任何阅读/提供解决方案的人。

我目前正在重建我的投资组合网站，但遇到了一个不是破坏网站的小问题，但如果没有正确构建，那就令人不悦了。

问题：当用户点击某个项目时，该描述会从隐藏状态向下滑动。当用户点击同一行上的另一个项目时，它基本上会尝试关闭当前项目，然后快速打开新项目，半秒钟，项目开始隐藏，然后再次展开，创建一个有趣的“反弹”效果。

理想情况下，我希望只显示同一行上的任何项目，而不会在任何时候改变高度。

代码： 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;
    }
});

网站也在这里：http://www.pbj.me/dev/pbj/v3

Answer 1

Jquery：不使用反弹，而是使用淡入。

在父div上设置高度，然后在子div上设置.fadeIn（1000）。动态地，当每个被点击时。

<style>
div.parent{height:50px; width:100%;}
div.child{height:100%; width:100%;}
</style>
<div class='parent'>
  <div class='child'>Project Information</div>
</div>

<script>
  $(".child").css("display", "none");
  $(".child").fadeIn(1000);
</script>

现在您需要做的就是在Click事件中设置脚本位

不要忘记将所有脚本包装在...中

$(document).ready(function() {

});

Ps，你的图像很疯狂，让它们更小，并将它们用于网络。否则，这将严重影响您的页面加载时间，并使javascript像猪一样运行。

Answer 2

因为您要从.open元素中删除$('.open').not($target)类，所以它会在您的新$target打开之前略微触发过渡动画。

我认为你必须以不同的方式关闭现有的窗口，具体取决于它们是否位于同一行。你总是每行只有2 <li>个元素吗？如果是这样，你可以使用这样的条件：

var predeOpenIndex = $（'。open'）。not（$ target）.index（; var targetIndex = $ target.index（）

if (( targetIndex % 2 === 0 && previouslyOpenIndex == targetIndex + 1) || (previouslyOpenIndex % 2 ===0 && targetIndex == previouslyOpenIndex + 1)) {
   // Descriptions are on the same row

}

jquery试图滑动已经打开的div，创建一个“反弹”效果

2 个答案: