如何更轻松地切换 .click？

Question

我正在为我的网页开发课程做期末考试，我正在尝试制作一个以博客为主题的网站。我想制作我的代码，以便有一张个人资料图片，当点击它时，它会变成一个框并显示个人简介和其他一些信息。我已经完成了那部分，但现在我想这样做，以便当再次单击个人资料图片时，它会使框和信息消失。我知道有一些方法，我尝试了一些但没有成功。当我尝试 .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>

Answer 2

这是我的建议：

• 不要在 jQuery 中执行单击动画，而是在单击时为图片元素提供一个活动类。
• 仅当图片具有活动类时才使用 CSS 执行动画。
• 如果您单击图片元素并且它存在，则删除该类。

我很乐意为您提供实际代码，但由于这是您的期末考试，这应该会给您一个良好的起点 :) 祝您好运！

Answer 3

尝试在 css 、 js 处使用 px 单位值；检查$("#info") 的click 的#picback 的display 属性以淡入、淡出#info；将#picbackcss重置为初始borderRadius，height

$(document).ready(function() {
  var picback = $("#picback")
  , info = $("#info");
  picback.click(function() {
    if (info.css("display") === "none") {
      $(this).animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow');
      info.fadeIn('slow');
    } else {
      $(this).animate({borderRadius:120,height:230}, 'slow');
      info.fadeOut('slow');
    }
  });
});

a {
  text-decoration: none;
  color: black;
  text-align: center;
}
#picback {
  background-color: #B8B8B8;
  border-radius: 120px;
  width: 230px;
  height: 230px;
  border: 2px solid white;
  margin: 0 auto;
  box-shadow: 0 0 5px;
}
#picback:hover {
  box-shadow: 0px 0px 8px black;
}
#profilepic {
  height: 200px;
  position: relative;
  top: 15px;
  left: 5px;
}
#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 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#'>
  <div id='picback'>
    <img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic'>
    <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>
</a>

codepenhttp://codepen.io/anon/pen/zGKepE

Answer 4

您应该使用 .toggleClass() 来点击图片，并在 css 中直接控制 bio 的状态（例如折叠和展开）。

Answer 5

这是一个非常简单的解决方案示例。已经发布的其他示例有点性感，但我只是使用了一个变量来检查它是打开还是关闭。我还添加了基本的关闭动画，但你会想要摆弄它以使其不可怕。例如，我建议在动画函数之后的回调中重置边框半径，以防止丑陋的椭圆效果。

$(document).ready(function() {
  var dropped = false;
  $('#picback').click(function() {
    if (!dropped) {
      $('#picback').animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow');
      $('#info').fadeIn('slow');
      dropped = true;
    } else { // Closing animation
      $('#picback').animate({
        borderRadius: "50%",
        height: "230px"
      }, 'slow');
      $('#info').fadeOut('slow');
      dropped = false;
    }
  });
});

http://codepen.io/anon/pen/dopaJq

Answer 6

你可以在这里做的是使用一个记住它的状态的闭包函数：

var clickHandler = (function () {
    var isOpen = false;
    return function () {
        isOpen = !isOpen; // Toggles between true and false
        if (isOpen) {
            $('#picback').animate({
                borderTopLeftRadius: 100,
                borderTopRightRadius: 100,
                borderBottomLeftRadius: 2,
                borderBottomRightRadius: 2,
                height: 460
            }, 'slow');
            $('#info').fadeIn('slow');
        } else {
            // Add close animation here
        }
    };
})();

$('#picback').click(clickHandler);

Answer 7

试试这个代码。它在动画时添加一个类，然后在动画之前检查它。

$(document).ready(function() {
  $('#picback').click(function() {
    var $this = $(this);
    if($this.hasClass('animated')) {
      $this.removeAttr('style').removeClass('animated');
    } else {
      $this.animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow').addClass('animated');
      $('#info').fadeIn('slow');

    }
  });
});