改變在多個按鈕的div的寬度單擊

Question

我這裏有一個小問題;）網站看起來是這樣的：

它有3個的div， 2在寬度15％ 和1頁的一面中間寬度70％

現在，如果我點擊箭頭關閉其中一個div，中間div的寬度變爲85％，這很好，但是我想實現的是，如果2 div是閉合寬度變成100％所以模式是這樣的

1 div closed = div的寬度在中間85％ 2 div closed =在中間的100％

這裏的div的寬度是我迄今爲止所取得：

JS：

$(function() { 
    $(".left_side").on("click", function() { 
     $(".templates").toggleClass("newClass flex-item", 1000); 
     $("#content-link2").toggleClass("clicked", 1000); 
     $(".left_side").toggleClass("left", 1000); 
    $(".hiding_template").toggleClass('glyphicon-chevron-left').toggleClass('glyphicon-chevron-right'); 
    }); 
    }); 
    $(function() { 
    $(".right_side").on("click", function() { 
     $(".featuress").toggleClass("newClass2 flex-item", 1000); 
    $("#content-link2").toggleClass("clicked", 1000); 
     $(".right_side").toggleClass("right", 1000); 
    $(".hiding_features").toggleClass('glyphicon-chevron-right').toggleClass('glyphicon-chevron-left'); 
    }); 
    }); 

CSS：

.left_side{ 
    color:black; 
    position: absolute; 
    top: 140px; 
    left: 15%; 
    border-radius: 50%; 
    margin-top: 100px; 
    text-align: center; 
    height:30px; 
    z-index:15; 
} 
.right_side{ 
    color:black; 
    position: absolute; 
    top: 140px; 
    right: 15%; 
    border-radius: 50%; 
    margin-top: 100px; 
    text-align: center; 
    height:30px; 
    z-index:15; 
} 
.newClass3{ 
    width: 85%; 
    height: 100%; 
} 
.newClass2{ 
    height: 0%; 
    width: 0%; 
    right: 0%; 
    display: none; 
} 
.newClass{ 
    height: 0%; 
    width: 0%; 
    left: 0%; 
    display: none; 
} 
.left{ 
    left: 0%; 
} 
.right{ 
    right: 0%; 
} 
.btn-sm{ 
    width: 210px; 
    margin-top: 10px; 
    text-align: center; 
} 
.flex-container { 
    margin-top: 50px; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    height: 89%; 
    background-color: #6d6968; 
} 
.flex-item { 
    background-color: cornflowerblue; 
    width: 15%; 
    height: 100%; 
} 
.flex-item2{ 
    width: 70%; 
    height: 100%; 
} 
.flex-item2.clicked{ 
    width: 85%; 
} 

HTML：

@extends('layouts.master') @section('title', 'Website Builder') @section('content') 
<meta name="csrf-token" content="{{ csrf_token() }}" /> 
<div class=flex-container> 
<div class="flex-item templates"> 

    @foreach ($templates as $template) 
    <a class="content-link" href="{{ asset($template->file)}}"> 
     <img src="{{ asset($template->image)}}"/> 
     </a> @endforeach 

</div> 
    <span class="glyphicon glyphicon-chevron-left hiding_template left_side"></span> 
    <span class="glyphicon glyphicon-chevron-right hiding_features right_side"></span> 
    <div class="pace pace-inactive"> 
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"> 
    <div class="pace-progress-inner"></div> 
     </div> 
    <div class="pace-activity"></div> 
</div> 
    <div id="content-link2" class="flex-item2"></div> 
<div class="flex-item featuress"> 
    <input class="form-control filestyle margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" /> 

    <script> 
    $(function() { 
    $(document).tooltip(); 
    }); 
    </script> 
    <button style="display: none" class="form-control margin btn btn-primary hide_all" id="showColor">Show Colors</button> 
    <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideColor">Hide Colors</button> 
    <input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin hide_all" type="color" id="colorChoice"> 
    <a style="display: none" href="#" class="btn btn-default form-control margin hide_all" id="cp4">Background</a> 

    <button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin hide_all">Load Fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin hide_all" id="fontsHide">Hide Fonts</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin hide_all"></select> 

    <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin hide_all">Google fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin hide_all" id="googleHide">Hide Google</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin hide_all"></select> 

    <button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin hide_all">Load font size</button> 
    <button style="display: none" class="btn btn-primary form-control margin hide_all" id="sizeHide">Hide font size</button> 
    <select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin hide_all"></select> 

    <button style="display: none" class="form-control margin btn btn-warning hide_all" id="finishEdit">Done</button> 
    <button class="form-control margin btn btn-default" id="startEdit">Edit</button> 

    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <button onClick=" updateDatabase(this);" type="button" class="form-control margin btn btn-success" id="getRequest">Save</button> 
    </div> 
</div> 
</body> 
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css"> 
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css"> 
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}"> 
</script> 
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}"> 
</script> 
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script> 
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}"> 
</script> 

</html> 
@endsection @show 

Answer 1

最好是使用更簡單的t像我剛剛測試的那樣。

以下是我有：

var newWidth = Math.floor(($("#center").width() * 100)/$(window).width()); 
 

 
$("#right,#left").click(function() { 
 

 
    $(this).hide(); 
 
    newWidth += 15; 
 
    $("#center").width(newWidth + "%"); 
 

 
});

div { 
 
    height: 300px; 
 
    box-sizing: border-box; 
 
    border: solid 1px #00f; 
 
    float: left; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    border: solid 1px #f00; 
 
} 
 

 
#left { 
 
    width: 15%; 
 
} 
 

 
#center { 
 
    width: 70%; 
 
} 
 

 
#right { 
 
    width: 15%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div id="left"> 
 
    </div> 
 
    <div id="center"> 
 
    </div> 
 
    <div id="right"> 
 
    </div> 
 
</div>

一旦你創建了一個簡單的設置，你可以移動到更復雜的變化。