Изменение размера жидкости, кроме первого div - PullRequest
Новая
       10

Изменение размера жидкости, кроме первого div

0 голосов
/ 23 февраля 2020

Я хотел бы иметь возможность расширять / сбрасывать при щелчке ширину выбранного согнутого элемента.

Моя главная задача состоит в том, чтобы я хотел, чтобы все остальные элементы div также изменяли размеры в реальном времени, соответственно, чтобы поместите оставшееся пространство.

Все они НО первый div, который я хочу всегда иметь фиксированную ширину и никогда не изменять размер.

Эта последняя часть является проблемой Я хочу обратиться.

Единственный способ, которым я мог бы сделать это, это:

HTML: 

<div class="wrapper">

    <div class="divFixed">Fixed</div>

    <div class="data">

        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>

    </div>

</div>

<button>Expand</button>

CSS: 

.wrapper{
    overflow:hidden;
    width:100%;
    border: 1px solid black;
}

.divFixed{
    width:50px; /* fixed */
    float:left;
    border-right: 1px solid black;
}

.data{
    width: calc( 100% - 51px );
    float:left;
    display: flex;
    justify-content: flex-start;
}

.divFluid{
    border-right: 1px solid black;
    overflow:hidden;
    transition: width 1s;
}

.divFluid:last-child{
    border-right: 0px;
}

jQuery: 

var clickStatus=0;

$(document).on('click','button',function(e){
    if(clickStatus==0){
        $('.divFluid:nth-child(1)').css('width','300%');
        $('button').html('Reset');
        clickStatus=1;
    }
    else{
        $('.divFluid:nth-child(1)').css('width','100%');
        $('button').html('Expand');
        clickStatus=0;
    }   
})

Вот jsfiddle:

https://jsfiddle.net/Lh5pnrcm/

Пример довольно ясный и отлично демонстрирует то, чего я хочу достичь. Так что это отлично работает, но не соответствует моим потребностям, так как мне нужен первый div, чтобы не быть структурно изолированным. Это немного долго объяснять, но изоляция в HTML очень затрудняет мне реализацию других функций, которые здесь не рассматриваются.

Другими словами, мне нужно, чтобы HTML было вот так, при достижении EXACT того же результата, который был показан в jsfiddle: 

<div class="wrapper">

    <div class="div">Fixed</div>
    <div class="div">Fluid</div>
    <div class="div">Fluid</div>
    <div class="div">Fluid</div>

</div>

<button>Expand</button>

Так как вы думаете, возможно ли отличить первый div при использовании flex, не изолируя его от остальных? из div в HTML (и без использования таблицы)?

Спасибо.

1 Ответ

2 голосов
/ 23 февраля 2020

Возможно, вам нужно быть более точным c, потому что я просто изменил HTML на то, что вам нужно, настройте селектор JS и добавьте min-width вместо width в CSS, и это работает: 

var clickStatus = 0;

$(document).on("click", "button", function(e) {
  if (clickStatus == 0) {
    $(".divFluid")
      .first()
      .css("width", "300%");
    $("button").html("Reset");
    clickStatus = 1;
  } else {
    $(".divFluid")
      .first()
      .css("width", "100%");
    $("button").html("Expand");
    clickStatus = 0;
  }
});
.wrapper {
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
    border: 1px solid black;
}

.divFixed {
    min-width: 50px; /* fixed width */
    background: #999;
    text-align: center;
    border-right: 1px solid black;
}

.data {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    background: #555;
}

.divFluid {
    width: 100%;
    border-right: 1px solid black;
    text-align: center;
    overflow: hidden;
    transition: width 1s;
}

.divFluid:last-child {
    border-right: 0px;
}

button {
    margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="data">
        <div class="divFixed">Fixed</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
    </div>
</div>
<button>Expand</button>

Я тоже немного почистил и избавился от любого float. Вы не можете смешивать плавающие элементы с Flex.

...