javascript - 选中复选框时如何显示div标签

Question

我有一个复选框，我想在选中它时显示一个 div 标签 ...

我的 div 在常规状态下的 CSS 是:

.bookInfo {
width: 0px;
font-size: 2em;
height: 0px;
overflow: hidden;
-webkit-transition: height 2s, width 2s;
-moz-transition: height 2s, width 2s;
-ms-transition: height 2s, width 2s;
-o-transition: height 2s, width 2s;
transition: height 2s, width 2s;    
}

我希望当我选中复选框时它变成:

width: auto;
height: auto;
-webkit-transition: height 2s, width 2s;
-moz-transition: height 2s, width 2s;
-ms-transition: height 2s, width 2s;
-o-transition: height 2s, width 2s;
transition: height 2s, width 2s;        

我的复选框和 div 标签:

 <input type="checkbox" name="bookList" value="book2" id="bookList_2">

  <div class="bookInfo" id="infoBox">
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
  </div>

我该怎么做？

Answer 1

您可以使用 css 相邻兄弟选择器 (CSS2.1) 执行此操作

它将在 Internet Explorer 7 中运行:

input[type=checkbox]:checked + .bookInfo{
    /* Your styles when cheked /*
}

所以你的 css 会是:

.bookInfo {
    width: 0px;
    font-size: 2em;
    height: 0px;
    overflow: hidden;
    -webkit-transition: height 2s, width 2s;
    -moz-transition: height 2s, width 2s;
    -ms-transition: height 2s, width 2s;
    -o-transition: height 2s, width 2s;
    transition: height 2s, width 2s;    
}

input[type=checkbox]:checked + .bookInfo{
    width: auto;
    height: auto;
}

(不需要多次指定过渡属性)

http://caniuse.com/css-sel2

http://css-tricks.com/almanac/selectors/c/checked/