Question

我为某人做了一个页面。我用复选框切换div的可见性但是，他想要改变在具有onclick事件的内容div之前的标题的高度。任何人都可以帮我吗？要么是css，要么是js / jquery。我试着寻找2个小时的工作答案。

我想要的：复选框关闭：div hidden＆amp;标题高度412px。选中复选框：div显示＆amp;标题高度212px。

＆＃13;

header {
width:100%;
height:412px;
text-align:center;
background:#1f1f1f;
margin: 0;
padding: 0;
border: 0;
position:relative;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
#wrapper td img {
position: absolute;
top: 50%;
left: 50%;
width: 736px;
height: 105px;
margin-top: -52px; /* Half the height */
margin-left: -368px; /* Half the width */
}

div.content { 
  background:#ebebec;
  position:relative;
  top:100px;
  color: white;
  width: 100%;
  text-align: center;
  font-family: BlueHighway, Arial Black, sans-serif;
  top:0;
}
div.content label {
  display: block;
  width:80px;
  height:88px;
  background:url(http://i.imgur.com/Buvp49A.png) no-repeat;
  background-position: center top;
  margin:0 auto;
  margin-bottom:30px;
}
div.content label:hover { 
  cursor: pointer; background-position: center bottom; 
}
div.button {
  display:block;
  position:relative;
  top:-67px;
  padding-top:22px;
  background:url(http://i.imgur.com/Gf3QAxt.png) no-repeat;
  background-position: center top;
}
input.toggle ~ div.description { 
  height: 0px;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div.description { height: 530px; }
input.toggle:checked + label { background-position: center bottom; }
input.toggle { display: none; }

＆＃13;

<header>
<table id="wrapper">
<tr>
<td><img src="http://i.imgur.com/vE3KBOv.png" alt="Santos@imvu"/></td>
</tr>
</table>
</header>
<div class="content">
  <div class="button">
<input type="checkbox" id="punch" class="toggle">
  <label for="punch"></label>
  <div class="description">
    <img src="http://i.imgur.com/8sY0E5c.gif" style="max-width:100%;height:auto" alt="bla">
  </div>
    </div>
</div>

＆＃13;

Demo

Answer 1

这样的东西？

我已将初始高度设置为212px，并为CSS header.expand添加了一个新类，您可以将高度设置为412px。之后，您触发jQuery中复选框的click()事件，并使用expand

切换toggleClass(...)类

<强>段

$('#punch').click(function() {
  $('header').toggleClass('expand');
});

html {
  background: grey;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}
body {
  background: #ebebec;
  width: 926px;
  margin: 0 auto;
  padding: 0;
  color: grey;
}
header {
  width: 100%;
  height: 212px;
  text-align: center;
  background: #1f1f1f;
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  transition: height .8s ease-out;
}
header.expand {
  height: 412px;
}
#wrapper td {
  vertical-align: middle;
  text-align: center;
}
#wrapper td img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 736px;
  height: 105px;
  margin-top: -52px;
  /* Half the height */
  margin-left: -368px;
  /* Half the width */
}
.image {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 94px;
}
footer {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
  background: #1f1f1f;
  margin-top: 28px;
  color: #fff;
  clear: both;
}
a {
  color: #0082ff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p {
  width: 870px;
  margin: 0 auto;
}
div.content {
  background: #ebebec;
  position: relative;
  top: 100px;
  color: white;
  width: 100%;
  text-align: center;
  font-family: BlueHighway, Arial Black, sans-serif;
  top: 0;
}
div.content label {
  display: block;
  width: 80px;
  height: 88px;
  background: url(http://i.imgur.com/Buvp49A.png) no-repeat;
  background-position: center top;
  margin: 0 auto;
  margin-bottom: 30px;
}
div.content label:hover {
  cursor: pointer;
  background-position: center bottom;
}
div.button {
  display: block;
  position: relative;
  top: -67px;
  padding-top: 22px;
  background: url(http://i.imgur.com/Gf3QAxt.png) no-repeat;
  background-position: center top;
}
input.toggle ~ div.description {
  height: 0px;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div.description {
  height: 530px;
}
input.toggle:checked + label {
  background-position: center bottom;
}
input.toggle {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <table id="wrapper">
    <tr>
      <td>
        <img src="http://i.imgur.com/vE3KBOv.png" alt="Santos@imvu" />
      </td>
    </tr>
  </table>
</header>
<div class="content">
  <div class="button">
    <input type="checkbox" id="punch" class="toggle">
    <label for="punch"></label>
    <div class="description">
      <img src="http://i.imgur.com/8sY0E5c.gif" style="max-width:100%;height:auto" alt="bla">
    </div>
  </div>
</div>

onlick事件之外的目标元素？

1 个答案: