3つのdivを並べて展開したり折りたたんだりするにはどうすればいいですか？

Question

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
     if ($(this).data('name') == 'show') { 
 
      $("#sidebar").animate({ 
 
       width: '10%' 
 
      }).hide() 
 
      $("#map").animate({ 
 
       width: '89%' 
 
      }); 
 
      $(this).data('name', 'hide') 
 
     } else { 
 
      $("#sidebar").animate({ 
 
       width: '29%' 
 
      }).show() 
 
      $("#map").animate({ 
 
       width: '70%' 
 
      }); 
 
      $(this).data('name', 'show') 
 
     } 
 
    }); 
 
});

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 
#map { 
 
    width: 80%; 
 
    height: 80%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 
#sidebar { 
 
    width: 19%; 
 
    height: 80%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header">HEADER 
 
    <input type="button" data-name="show" value="Toggle" id="toggle"> 
 
</div> 
 
<div id="map">MAP</div> 
 
<div id="sidebar">SIDEBAR</div>

私はangularjs、jqueryとcssで初心者です。私は横に並べてトグルで3つのdivを作成したい どうやってそれをangeljsで手伝ってください。ノーマルモードの例では

： -

それはこのようになります。

私が展開するとセンターは、この例のようにする必要がありDIV： -

が、私はそれがこの例のようにする必要がある最後のdivを展開する場合： -

ありがとう..

Answer 1

これを試してみてください。すべてのdivを任意の順序で展開できます。通常の位置に戻すには、展開したdivを再度クリックします。

圧縮された状態と拡張された状態の幅はパーセンテージで表され、必要に応じてCSSで変更できます。また、円滑な機能のためにtransitionプロパティを追加しました。

ここにはpenがあります。

$("a.expansion-btn").click(function(){ 
 
    classes = this.className; 
 
    var divNumber = classes.slice(-1); 
 
    var toGetId = "#div-"+divNumber; 
 
    if ($(toGetId).hasClass("expanded-div")){ 
 
    $(".normal-div").removeClass("compressed-div expanded-div"); 
 
    } 
 
    else{ 
 
    $(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");; 
 
    $(toGetId).removeClass("compressed-div").addClass("expanded-div");  
 
    } 
 
});

*{ 
 
    box-sizing:border-box; 
 
} 
 
.container{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:400px; 
 
} 
 
.normal-div{ 
 
    width:33.33%; 
 
    height:100%; 
 
    position:relative; 
 
    border:2px solid black; 
 
    float:left; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.expanded-div{ 
 
    width:80%; 
 
} 
 
.compressed-div{ 
 
    width:10%; 
 
} 
 
#div-1{ 
 
    background-color:green; 
 
} 
 
#div-2{ 
 
    background-color:red; 
 
} 
 
#div-3{ 
 
    background-color:blue; 
 
} 
 
a.expansion-btn{ 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="normal-div" id="div-1"> 
 
    <a class="expansion-btn exp-1">click</a> 
 
    </div> 
 
    <div class="normal-div" id="div-2"> 
 
    <a class="expansion-btn exp-2">click</a> 
 
    </div> 
 
    <div class="normal-div" id="div-3"> 
 
    <a class="expansion-btn exp-3">click</a> 
 
    </div> 
 
</div>

Answer 2

divを切り替えたい場合は、次のようにします。

// varible for holding div index 
 
var i = 0, 
 
    // cache divs 
 
    $div = $('.div');; 
 

 
// bind click event handler 
 
$('.toggle').click(function() { 
 
    $div 
 
    // remove both class from all elements 
 
    .removeClass('active nonactive') 
 
    // get element by index 
 
    .eq(i) 
 
    // add active class 
 
    .addClass('active') 
 
    // get siblings 
 
    .siblings() 
 
    // add nonactive class 
 
    .addClass('nonactive'); 
 
    // update index 
 
    i = ++i % $div.length; 
 
})

.div { 
 
    height: 300px; 
 
    width: 30%; 
 
    border: solid 1px black; 
 
    display: inline-block 
 
} 
 
.active { 
 
    width: 75%; 
 
} 
 
.nonactive { 
 
    width: 10%; 
 
} 
 
.active, 
 
.nonactive { 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="toggle">toggle</button> 
 
<br> 
 
<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

---

それとも、divの内側のボタンをクリックしたときに切り替えたい場合は、このような何かを行います。

$('.toggle').click(function() { 
 
    $(this) 
 
    // get div 
 
    .parent() 
 
    // remove nonactive class from clicked element 
 
    .removeClass('nonactive') 
 
    // toggle active class 
 
    .toggleClass('active') 
 
    // get sibling divs 
 
    .siblings() 
 
    // remove active class from siblings 
 
    .removeClass('active') 
 
    // toggle nonactive class based on the clicked element 
 
    .toggleClass('nonactive', $(this).parent().is('.active')); 
 
})

.div { 
 
    height: 300px; 
 
    width: 30%; 
 
    border: solid 1px black; 
 
    display: inline-block 
 
} 
 
.active { 
 
    width: 75%; 
 
} 
 
.nonactive { 
 
    width: 10%; 
 
} 
 
.div, 
 
.active, 
 
.nonactive { 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="div"> 
 
    <button class="toggle">toggle</button> 
 
    </div> 
 
    <div class="div"> 
 
    <button class="toggle">toggle</button> 
 
    </div> 
 
    <div class="div"> 
 
    <button class="toggle">toggle</button> 
 
    </div> 
 
</div>

Answer 3

<div id="header">HEADER 
     <input type="button" data-name="show" value="Toggle" id="toggle"> 
    </div> 
    <div id="maincont"> 
     <div id="map" class="active">MAP</div> 
     <div id="sidebar" class="inactive">SIDEBAR</div> 
     <div id="sidebar1" class="inactive">SIDEBAR1</div> 
    </div> 

スクリプト：

$(document).ready(function() {  
      $("#toggle").click(function() { 

         var $div = $('#maincont').find(".active"); 
         $div.removeClass('active').addClass("inactive").next().addClass("active");  

         $('#maincont').find(".inactive").animate({ 
          width: '10%' 
         }) 

         $('#maincont').find(".active").animate({ 
          width: '79%' 
         });   

      }); 

    }); 

CSS。

  html, body { 
      width:100%; 
      height: 100%; 
     } 
     #header { 
      width: 100%; 
      height: 100px; 
      float: left; 
      border: 1px solid; 
     } 
     #map { 
      height: 80%; 
      float: left; 
      border: 1px solid; 
     } 
     .active{ 
      width:78%; 
      float: left; 
      height: 100px; 
     } 
     .inactive{ 
      width:10%; 
      float: left; 
      border: 1px solid; 
      height: 100px; 
     } 
     #sidebar { 
      height: 80%; 
      float: left; 

     } 
     #toggle { 
      width: 10%; 
      height: 40%; 
      margin-right: 6.5%; 
      margin-top: 3.5%; 
      float: right; 
     } 

fiddle link

Answer 4

あなたはここで、angularjsであなたの質問にタグ付けされているので無派手なCSSでシンプルなソリューションです：

はあなたがパネル/ divを記述するオブジェクトの一部の配列を持っていると仮定コントローラ、例えば

expandedフラグは実際にどのパネルが実際に展開されたかを記録します。デフォルトでは最初のものです。あなたがパネルをクリックしたとき

はその後、この関数は、選択したパネルにフラグを設定します。

$scope.expandPanel = function(panel) { 
    $scope.panels.forEach(p => p.expanded = false); 
    panel.expanded = true; 
    } 

そして、あなたは重要なことは、に応じて動的にクラスを設定することですng-repeatループ内ですべてのことを表示しますng-classとexpandedフラグ：

<div class="panel" 
    ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}" 
    ng-repeat="panel in panels" ng-click="expandPanel(panel)"> 
    <span>{{panel.title}}</span> 
</div> 

はそれlive with this plunker参照してください。

注：.panel,.expandedおよび.reducedクラスは、plunker cssファイルで定義されています。