jquery - 在悬停/鼠标移出事件时关闭/展开宽度

Question

很难找到一个好的标题，很抱歉...

我有后续代码

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

Answer 1

我猜你想要这样的东西？

说明:点击 .group2 我添加了一个类 expanded 。第二次单击该类将被删除 (toggleClass)。与类 shr​​ink

相同的 .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>