javascript - 如何更轻松地切换 .click？

Question

我正在为我的网页开发类(class)做期末考试，我正在尝试制作一个以博客为主题的网站。我想制作我的代码，以便有一张个人资料图片，当单击它时它会变成一个框并显示个人简介和其他一些信息。我已经完成了那部分，但现在我想做的是，当再次点击个人资料图片时，它会使框和信息消失。我知道有很多方法，我已经尝试了一些但没有成功。当我尝试 .toggle 时，它​​完全消失了。任何建议都会有所帮助，谢谢

(JSfiddle 不适合我，抱歉)> CodePen

JavaScript:

$(document).ready(function() {
  $('#picback').click(function() {
    $('#picback').animate({
      borderTopLeftRadius: 100,
      borderTopRightRadius: 100,
      borderBottomLeftRadius: 2,
      borderBottomRightRadius: 2,
      height: 460
    }, 'slow');
    $('#info').fadeIn('slow');
  });
});

Answer 1

现在是 2015 年。这里不需要 Javascript 或 jQuery!

使用 CSS 转换并使用 :checked 伪类。这样你也可以很容易地设置一个初始状态。

完整的演示:http://codepen.io/anon/pen/mJrvXo

#visibleToggle {
  display: none;
}
#picback {
  background-color: #B8B8B8;
  border-radius: 50%;
  width: 230px;
  height: 230px;
  border: 2px solid white;
  margin: 0 auto;
  box-shadow: 0 0 5px;
  text-align: center;
  transition-duration: 0.6s;
}
#picback:hover {
  box-shadow: 0px 0px 8px black;
  cursor: pointer;
}
#profilepic {
  height: 200px;
  position: relative;
  top: 16px;
  left: 2px;
}
#profilepic:hover {
  cursor: pointer;
}
#name {
  font-family: 'Playball', cursive;
  color: blue;
  text-shadow: 0 0 3px white;
}
#age {
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 25px;
}
#bio {
  font-family: 'Roboto', sans-serif;
  color: white;
}
#info {
  opacity: 0;
}
#visibleToggle:checked + #picback {
  border-radius: 120px 120px 2px 2px;
  height: 460px;
}
#visibleToggle:checked + #picback #info {
  opacity: 1;
}

<input type="checkbox" id="visibleToggle" />
<div id='picback'>
  <label for="visibleToggle">
    <img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic' />
  </label>
  <div id='info'>
    <h2 id='name'>Joshua T. Hurlburt</h2>
    <h2 id='age'>15</h2>
    <p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
  </div>
</div>