Üç div yan yana nasıl genişletilir ve daraltılır?

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>

Ben angularjs, jquery ve css bir acemi değilim. Ben tarafından yan yana geçiş ile üç div oluşturmak istiyorum Lütfen bunu angularjs içinde nasıl yapacağımı yardım edin. normal mod Örnek olarak

: -

Böyle olacak.

Ben genişletirseniz merkezi bu örnek gibi olması gerekiyor div: -

Ben bu örnek gibi olmak ihtiyacı olan son div genişletirseniz: -

Teşekkürler ..

Answer 1

bu deneyin. Tüm div herhangi bir sırayla genişletilebilir. Normal konuma geri dönmek için genişletilmiş div'a tekrar tıklayın.

Sıkıştırılmış ve genişletilmiş hallerde genişlik yüzde olarak ifade edilir ve gereksinimlerinize göre bunları css'de değiştirebilirsiniz. Ayrıca düzgün çalışma için transition özelliğini ekledim. Bu değer, bir 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

Sadece div'ler arasında geçiş yapmak istiyorsanız, bunun gibi bir şey yapın.

---

Yoksa o zaman böyle bir şey yapmak div içinde bir düğme tıklandığında geçiş istiyorsanız

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

.

$('.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> 

senaryo:

$(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.

sen/div'ler panelleri açıklayan nesnelerin bazı dizi olduğunu varsayalım: Eğer angularjs soruyla etiketlenmiş yana

  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

, burada hiçbir fantezi CSS ile basit bir çözümdür kontrolör, örneğin

$scope.panels = [{ 
    title: "One", 
    expanded: true 
    }, { 
    title: "Two" 
    }, { 
    title: "Three" 
    }]; 

expanded bayrak

sadece fiilen genişletilir hangi paneli izlemek. Varsayılan olarak birincisi. Eğer bir panelde tıkladığınızda

Sonra, bu fonksiyon, seçilen panele bayrağını ayarlayın:

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

Ve Anahtar nokta dinamik sınıf bağlı ayarlamaktır bir ng-repeat döngüde tüm bu görüntüler ng-class ile expanded bayrak:

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

bunu live with this plunker bakınız. Not: .panel, .expanded ve .reduced sınıfları, plunker css dosyasında tanımlanmıştır.