使用CSS和jQuery將div並排切換

Question

單擊圖像后，我想沿另一側切換div。 當它切換為打開狀態時，應將其旁邊的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>

Answer 1

簡單的東西！ 這是一個例子。 現場演示在這里（單擊）。

重要的部分只是切換的元素上的css float和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復選框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;
}

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