2

当单击图像时，我想在另一个旁边切换一个 div。当它切换打开时，它应该将旁边的 div 推到左侧。当切换关闭 div 时，它会移回它的位置......它现在所做的是在它旁边的 div 顶部切换。这是我的代码。

   img{
   margin-left:0px;
  }

  #info {
    position: absolute;
    margin-left: 20px;
    margin-top: -310px;
    border: 1px solid black;
    width: 400px;
    height: 308px;
    background-color: #F4F4EE;
   }

   #container {
      border: 1px solid black;
      position: relative;
    }

jQuery...

     $(document).ready( function(){
  hideInfo();
     });

    function hideInfo(){
       $( '#container > div' ).hide();

      $('#container a').click(function(){
      $(this).next().animate({
               width: "toggle",
               height: "toggle"}, 
           {duration: 700, 
            specialEasing: {width: "linear"},
         });
       });
    }

html

        <body>
        <div id="container">
   <a href="#"><img src="button.jpg"/></a> /*image must be clicked to toggle the div */
  <div id="info" class="panel">
        Information in div 1
   </div>
           <a href="#"><img src="button2.jpg"/></a               
            <div id="info"  class="panel">
                 information in the second div
         </div>
     <div>
   </body>
4

1 回答 1

4

简单的东西！这是一个例子。现场演示（点击）。

重要的部分只是 cssfloat和width切换元素。

示例标记：

<img id="click" src="http://th01.deviantart.net/fs71/PRE/f/2011/285/3/0/feel_like_a_sir_by_rober_raik-d4clwcf.png">
<div id="add">Toggled content in here.</div>
<div>Some content in here.</div>

的CSS：

#add {
  display: none;
  float: left; /* change to right if needed */
  width: 20%;
}

JavaScript（仅用于切换额外元素）：

var img = document.getElementById('click');
var add = document.getElementById('add');

img.addEventListener('click', function() {
  var display = add.style.display;
  add.style.display = (add.style.display == 'none' || !add.style.display) ? 'block' : 'none';
});

现在，到专业的东西。抛弃javascript！ 纯 html/css 解决方案现场演示在这里。（点击）。

这里的诀窍是利用以下能力
1. 通过标签检查复选框
2. 使用 :checked 检查的样式复选框3. 选择与所用
内容相同的元素:checked~

将图像包装在复选框的标签中 - 从而在单击图像时选中复选框。用 隐藏复选框display: none。样式/动画切换的元素。赢。

<input id="toggle" type="checkbox">
<label for="toggle">
  <img src="http://th01.deviantart.net/fs71/PRE/f/2011/285/3/0/feel_like_a_sir_by_rober_raik-d4clwcf.png">
</label>
<div class="add">Toggled content in here.</div>
<div>Some content in here.</div>

和神奇的CSS：

.add {
  float: left; /* change to right if needed */
  display: none;
}

#toggle {
  display: none;
}

#toggle:checked ~ .add {
  width: 20%;
  display: block;
}
于 2013-11-14T15:18:30.777 回答