很难找到一个好的标题,很抱歉...
我有后续代码
.wrapper {
display: flex;
border: 1px solid red;
padding: 10px;
}
.groups {
display: flex;
border: 2px solid blue;
width: 70%;
}
.leftColumn {
width: 30%;
background-color: lightgrey;
}
.group1 {
width: 85%;
background-color: lightblue;
}
.group2 {
width: 15%;
background-color: lightyellow
}
.group2:hover {
cursor: pointer;
}
<div class="wrapper">
<div class="leftColumn">Left</div>
<div class="groups">
<div class="group1">Group 1</div>
<div class="group2" ng-click="toggleColumn()">Group 2</div>
</div>
</div>
因此,在代码片段中,您可以看到一个包装器(红色边框),其中包含三列。第一列(浅灰色列)的固定宽度为 30%。然后您可以看到另一个包装器(蓝色边框),其中包含两列(浅蓝色和浅黄色)。 wrapper (蓝色边框)的宽度也固定为父级的 70%。其中的列再次具有两个宽度 85%(浅蓝色)和 15%(浅黄色)。现在,当我点击它时,我想展开/关闭浅黄色的。线索是,当我展开它时,浅蓝色和黄蓝色应该有 50% 的 wrapper (蓝色边框)。当我关闭浅黄色时,它应该又是 85% 和 15%。这应该是动态的……我不知道该怎么做……希望有人能帮助我……谢谢
<强>!!!编辑:我自己的 AngularJS/NG-CLASS 解决方案!!!
描述:我发现了一个很好的angularjs
解决方案,它是ng-class
。我使用 boolean
,它默认为 false,用于检查我的列是否已展开。然后我实现了一个宽度为 50% 的新 css
class
。我将此类分配给我的两列,当列展开时,它们的宽度应为 50%。因此,当我展开该列并且 bool 值为真时,它们都获得了宽度为 50% 的类并正确显示。当我再次关闭该列时,类被删除,组的默认宽度为 85% 和 15%。这很好用,而且非常简单。给你:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isExpanded = false;
});
.wrapper {
display: flex;
border: 1px solid red;
padding: 10px;
}
.groups {
display: flex;
border: 2px solid blue;
width: 70%;
}
.leftColumn {
width: 30%;
background-color: lightgrey;
}
.group1 {
width: 85%;
background-color: lightblue;
}
.group2 {
width: 15%;
background-color: lightyellow
}
.group2:hover {
cursor: pointer;
}
.cExpandedWidth {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="myApp" ng-controller="myController">
<div class="leftColumn">Left</div>
<div class="groups">
<div class="group1" ng-class="{cExpandedWidth: isExpanded}">Group 1</div>
<div class="group2" ng-class="{cExpandedWidth: isExpanded}" ng-click="isExpanded = !isExpanded">Group 2</div>
</div>
</div>
最佳答案
我猜你想要这样的东西?
说明:点击 .group2
我添加了一个类 expanded
。第二次单击该类将被删除 (toggleClass)。与类 shrink
.group1
然后,使用 CSS,我给 group2
类 expanded
宽度 50%
和它的兄弟 .group1 .shrink
将宽度缩小到 50%
我还提供了一些transitions
,这样效果会更好
让我知道这是否是您要找的
$('.group2').click(function(){
$(this).toggleClass("expanded")
$(this).siblings(".group1").toggleClass("shrink")
})
.wrapper {
display: flex;
border: 1px solid red;
padding: 10px;
}
.groups {
display: flex;
border: 2px solid blue;
width: 70%;
}
.leftColumn {
width: 30%;
background-color: lightgrey;
}
.group1 {
width: 85%;
background-color: lightblue;
transition:0.5s;
}
.group2 {
width: 15%;
background-color: lightyellow;
transition:0.5s;
}
.group2:hover {
cursor: pointer;
}
.group2.expanded{
width:50%;
}
.group1.shrink {
width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="leftColumn">Left</div>
<div class="groups">
<div class="group1">Group 1</div>
<div class="group2">Group 2</div>
</div>
</div>
关于jquery - 在悬停/鼠标移出事件时关闭/展开宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39576070/