Làm cách nào để mở rộng và thu gọn ba bên của 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>

Tôi là một người mới bắt đầu trong angularjs, jquery và css. Tôi muốn tạo ra ba div với chuyển đổi bên cạnh Xin vui lòng giúp tôi làm thế nào để làm điều đó trong angularjs.

Trong chế độ bình thường Ví dụ: -

Nó sẽ như thế này.

Nếu tôi mở rộng trung tâm div nó cần phải được như ví dụ này: -

Nếu tôi mở rộng div cuối cùng nó cần phải được như ví dụ này: -

Cảm ơn ..

Answer 1

Hãy thử điều này. Tất cả các div có thể được mở rộng theo thứ tự bất kỳ. Để chuyển trở lại vị trí bình thường, hãy nhấp lại vào div được mở rộng.

Chiều rộng ở trạng thái nén và mở rộng được biểu thị bằng phần trăm và bạn có thể thay đổi chúng trong css, theo yêu cầu của bạn. Ngoài ra tôi đã thêm transition tài sản để hoạt động trơn tru.

Đây là 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

Nếu bạn chỉ muốn chuyển đổi giữa các div thì hãy thực hiện điều gì đó như thế này.

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

---

Hoặc nếu bạn muốn chuyển đổi khi nhấp vào một nút bên trong div sau đó làm một cái gì đó như thế này.

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

kịch bản:

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

Vì bạn gắn thẻ câu hỏi của bạn với angularjs, đây là một giải pháp đơn giản không có CSS ​​ưa thích:

Giả sử bạn có một số mảng của các đối tượng mô tả các tấm/div trong bộ điều khiển, vd

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

Cờ expanded chỉ theo dõi bảng thực sự được mở rộng. Theo mặc định là cái đầu tiên.

Sau đó, khi bạn click vào một bảng điều khiển, chức năng này đặt cờ vào bảng chọn:

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

Và bạn sẽ hiển thị tất cả những gì trong một vòng lặp ng-repeat nơi điều quan trọng là để thiết lập tự động các tầng lớp phụ thuộc vào các expanded cờ với ng-class:

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

Xem nó live with this plunker.

Lưu ý: .panel, .expanded và .reduced các lớp được xác định trong tệp css plunker.