javascript - 单击多个按钮时更改 div 的宽度

Question

我这里有一个小问题；)网站如下所示:

它有 3 个 div， 页面每侧 2 个，宽度 15% 中间 1 个，宽度 70%

现在，如果我单击箭头关闭其中一个 div，中间的 div 的宽度会更改为 85%，这很好，但是我想要实现的是，如果关闭 2 个 div，宽度会更改为 100%，因此模式是这样的

1 个 div 闭合 = 中间 div 的宽度 85% 2 div闭合=中间div的宽度100%

这是我迄今为止所取得的成就:

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

最好是在更简单的模板和设置上使用，就像我刚刚测试的那样。

这是我所拥有的:

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>

创建简单的设置后，您可以转向更复杂的变体。