jquery - 如何使用jquery指定css并覆盖css文件中的css

Question

我有三个不同宽度的容器。第一个容器占 14%，第二个容器占 26%，第三个容器占 60%。这是我的代码。

 <div class="mainContainer">
    <div class="container1">
       <div>
            <label>Label1</label></div>
        </div>
        <div ">
            <label>Label2</label></div>
        </div>
        <div  ng-click="minPageType()" title="Toggle Panel">
            <div  ng-if="togglePanel">
                <i class="fa fa-angle-double-left"></i>
            </div>
            <div ng-if="!togglePanel">
                <i class="fa fa-angle-double-right"></i>
            </div>
        </div>
    </div>
    <div class="container2">             
         // Container2 items
    </div>
    <div class="container3">
      //Container3 contents
   </div>
 </div>   

Here is  my css

.container1{
  position: absolute; 
  width:14%;   
}  
.container2 {
  width: 26%;
  left: 14%;  
  position:absolute;
}

.container3 {
  width: 60%;
  left: 40%;  
  position:absolute;
}

它正在工作。当页面打开时，它显示三个具有适当宽度的容器，当我单击“fa fa-angle-double-left”图标时，第一个容器应该固定为 56px，并且当我调整屏幕大小时它不应该与其他容器重叠。我试过这个 jquery 代码。

 $scope.minPageType = function(){
        if($scope.pageTypeToggle === true){
            //max screen size          
           $(".container1").css("width", "14%");
           $(".container2").css("left", "14%");
            $(".container3").css("left", "40%");
            $(".container3").css("width", "60%");
            $scope.togglePanel = true;
        } else {
            //min screen size
            $(".container1").css("width", "56px");
            $(".container2").css("left", "56px");
            $(".container3").css("left", "29%");
            $(".container3").css("width", "71%");
            $scope.togglePanel = false;
        }
        $scope.pageTypeToggle = !$scope.pageTypeToggle;
    };

此代码无效。当我放置此代码并尝试调整屏幕大小时，第一个容器宽度未固定为 56px。CSS 中提到的百分比被覆盖。在控制台中，它仍然显示第一个容器宽度为 14%。如何不覆盖使用 jquery 提到的 css，并在 css 文件中指定宽度百分比？

Answer 1

这是使用 jquery 更改任何标签属性的简单方法。

使用 attr() 代替 css()。

 $scope.minPageType = function(){
    if($scope.pageTypeToggle === true){
        //max screen size          
       $(".container1").attr('style','width:14% !important')
       $(".container2").attr('style','left:14% !important')
        $(".container3").attr('style','left:40% !important')
        $(".container3").attr('style','width:60% !important')
        $scope.togglePanel = true;
    } else {
        //min screen size
        $(".container1").attr('style','width:56px !important')
        $(".container2").attr('style','left:56px !important')
        $(".container3").attr('style','left:29% !important')
        $(".container3").attr('style','width:17% !important')
        $scope.togglePanel = false;
    }
    $scope.pageTypeToggle = !$scope.pageTypeToggle;
};

我希望你能得到你的解决方案。