关闭/展开悬停/鼠标移动事件的宽度

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>

所以在代码片段中你可以看到一个包装器（红色边框），它包含三列。第一列（lightgrey one）的固定宽度为30％。然后你可以看到另一个包装（蓝色边框），它包含两列（浅蓝色和浅黄色）。包装器（蓝色边框）的固定宽度为其父级的70％。其中的列有两个宽度为85％（浅蓝色）和15％（浅黄色）。现在，当我点击它时，我想扩展/关闭lightyellow。线索是，当我展开它时，浅蓝色和黄色蓝色应该有50％的包装纸（蓝色边框）。当我关闭淡黄色时，它应该再次有85％和15％。这应该是动态的...我不知道该怎么做...希望有人可以帮助我......谢谢

!!!编辑：我自己的ANGULARJS / NG-CLASS解决方案!!!

Descitpion：我找到了angularjs的良好解决方案，它是ng-class。我使用boolean，默认为false，用于检查我的列是否已展开。比我实现了宽度为50％的新css class。我将这个类分配给我的两个列，当扩展列时，该列的宽度应为50％。因此，当我展开列并且布尔值为true时，它们都获得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）。与.group1

的shrink相同

然后，使用CSS，我为group2提供宽度为expanded的课程50%，并将其宽度.group1.shrink缩小为50% 1}}

我还给了一些transitions所以它会更好用

让我知道这是否是你想要的

＆＃13;

＆＃13;

$('.group2').click(function(){
     $(this).toggleClass("expanded")
     $(this).siblings(".group1").toggleClass("shrink")
})

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

$(document).ready(function()
{
	count=0;
	$('.group2').click(function()
	{
		if(count==0)
		{
		$(this).css("width","50%");
		$('.group1').css("width","50%");
		count++;
		}
		else
		{
		$(this).css("width","15%");
		$('.group1').css("width","85%");
		count=0;
		}
	});
	
});

＆＃13;

.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-duration:1s;
}
.group2 {
  width: 15%;
  background-color: lightyellow;
  transition-duration:1s;
}
.group2:hover {
  cursor: pointer;
}

＆＃13;

<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" ng-click="toggleColumn()">Group 2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所知，此代码使用jquery并遵循click事件。

要显示动画，我已在group1和group2类中包含转换持续时间。

希望它有所帮助。

Answer 3

您可以使用:hover和Jquery来更改CSS。 看一下这个pen here

的JQuery / JS

$( ".group2" ).hover(function() {
    $(".group2").css("width", "50%");
    $(".group1").css("width", "50%")
});

$( ".group2" ).mouseleave(function() {
    $(".group2").css("width", "15%");
    $(".group1").css("width", "85%");
});

然后在鼠标关闭时您可以将其更改回来。您也可以通过CSS中的animate:属性使这个动画变得平滑。

Answer 4

如果我的问题正确，我认为这就是你想要的。基本上通过显示/隐藏leftColumn div 来缩小/展开蓝色边框组。您可以稍后添加动画以滑动div并改善用户体验。

检查代码段＆amp;如果您有任何疑问，请告诉我。

＆＃13;

＆＃13;

$('.group2').click(function(){
  var elem = $('.leftColumn');
  if(elem.is(':visible')) {
    elem.hide();
    $('.groups').css('width', '100%');
    $('.group1').css('width', '50%');
    $('.group2').css('width', '50%');
  } else {
    elem.show();
    $('.groups').css('width', '70%');
    $('.group1').css('width', '85%');
    $('.group2').css('width', '15%');
  }
});

＆＃13;

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

＆＃13;

<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" ng-click="toggleColumn()">Group 2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;