使用CSS和jQuery将div并排切换

Question

I want to toggle a div along side another when an image has been clicked. 单击图像后，我想沿另一侧切换div。 As it toggles open it should push the div next to it to the left. 当它切换为打开状态时，应将其旁边的div推到左侧。 When toggled closed the div along side it moves back to its position...What it does now is toggle on top of the div next to it. 当切换到关闭div的一侧时，它会移回其位置...现在要做的是在div旁边的div上切换。 This is my code. 这是我的代码。

   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;
    }

The jQuery... 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"},
         });
       });
    }

The Html 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>

Answer 1

Easy stuff! 简单的东西！ Here's an example. 这是一个例子。 Live demo here (click). 现场演示在这里（单击）。

The important part ist just the css float and width on the toggled element. 重要的部分只是切换的元素上的css float和width 。

sample markup: 样本标记：

<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>

the css: CSS：

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

JavaScript (just for toggling the extra element): 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';
});

Now, onto the pro stuff. 现在，介绍专业人士。 Ditch the javascript! 抛弃JavaScript！ Pure html/css solution live demo here. 纯HTML / CSS解决方案在线演示。 (click). （点击）。

The trick here is to take advantage of being able to 这里的诀窍是利用能够
1. check checkboxes via their label 1.通过其标签选中复选框
2. style checkboxes that are checked with :checked 2.使用：checked选中的样式复选框
3. select elements that are a sibling of what is :checked with ~ 3.选择是什么是兄弟元素:checked用~

Wrap the image in the label for the checkbox - thus checking the checkbox when clicking the image. 将图像包装在复选框标签中-从而在单击图像时选中复选框。 Hide the checkbox with display: none . 隐藏display: none复选框display: none 。 Style/Animate the toggled element. 为切换的元素设置样式/动画。 Win. 赢得。

<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>

and the magic css: 和魔术的CSS：

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

#toggle {
  display: none;
}

#toggle:checked ~ .add {
  width: 20%;
  display: block;
}

使用CSS和jQuery将div并排切换

问题描述

1 个解决方案

解决方案1
3 2013-11-14 15:18:30

使用CSS和jQuery将div并排切换

问题描述

1 个解决方案

解决方案1 3 2013-11-14 15:18:30

解决方案1
3 2013-11-14 15:18:30