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>

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

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

1 个答案: