Javascript 帮助：单击一个元素会影响该元素和其他元素

Question

我还没有真正使用 javascript 的经验，所以我目前正在尝试掌握它的基本第一步。

设置：

我有 these four div boxes in parent-container with the flex-property，每个盒子有 25% 的宽度。

<section>
    <div class="box box1"></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>
</section>

当悬停在其中一个方框上时，该特定方框的宽度变为 40%，而其余方框的宽度减小到 20%。

然后当您单击其中一个框时，该框的宽度变为 85%，其余框的宽度减小为 5%。

如果你然后点击另一个盒子，那个盒子得到85%的宽度，并且剩余的箱子减少到 5%。

要回到所有 25% 宽度的框，使用一个简单的交叉就可以完成这项工作（虽然还没有编码）。

Problem/Troubleshooting:

我开始尝试使用输入复选框做一个全 CSS 解决方案，但很快意识到这是行不通的，因为 CSS 没有可以影响以前的选择器兄弟姐妹。

因此，我需要两个javascript函数。

(1) 当单击其中一个框时，该元素会获得一定的宽度，其余框的宽度也会变小。

(2) 如果您已经单击其中一个框，现在宽度为 85%，如果您单击其他框之一，那个特定框现在是“所选的那个”，宽度为 85%。

我感觉这是两个简单的函数。我只是没有使用经验javascript，所以我不确定要写什么。

Answer 1

这是使用 jQuery 的一种可能的解决方案：

$(".box").on({ 
    mouseenter: function(){
        if ($(".box.clicked").length) return false;

        $(this).siblings(".box").css("width","20%");
        $(this).css("width","40%");
    },
    mouseleave: function(){
        if ($(".box.clicked").length) return false;

        $(this).siblings(".box").css("width","25%");
        $(this).css("width","25%");
    }
})

$(".box").on("click", function(e){

    $(".box.clicked").css("width","5%");
    $(".box.clicked").removeClass("clicked");

    $(this).addClass("clicked");
    $(this).css("width","85%");
    $(this).siblings(".box").css("width","5%");

    if ($(e.target).hasClass("exit")) {
        $(this).removeClass("clicked");
        $(this).css("width","25%");
        $(this).siblings(".box").css("width","25%");
    }
    
})

* {
    margin: 0;
    padding: 0;
}
section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    width: 100%;
    min-height: 250px;
}
.box {
    width: 25%;
    height: 250px;
    position: relative;
}
.box1 {
    background-color: red;
}
.box2 {
    background-color: blue;
}
.box3 {
    background-color: green;
}
.box4 {
    background-color: yellow;
}

.box .exit {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 10px;
    display: none;
    font-weight: bold;
}
.box.clicked .exit {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<meta charset="utf-8">

<section>
    <div class="box box1">
        <p class="exit">×</p>
    </div>

    <div class="box box2">
        <p class="exit">×</p>
    </div>

    <div class="box box3">
        <p class="exit">×</p>
    </div>

    <div class="box box4">
        <p class="exit">×</p>
    </div>
</section>

您也可以将这些属性分配给类，然后仅将 add/remove 类分配给事件，但结构总体上是相同的。

下次，请先尝试自己编写代码，并提供您尝试过的示例。

Answer 2

正如 CherryDT 所说，它可以通过 flex-basis

完成

或者如果可以用 css 完成，例如无线电组并检查

section {
  position: relative;
  display: flex;
    width: 100%;
    height: 100px;
}

input {
  appearance: none;
  display: block;
  padding: 0;
  margin: 0;
  width: 25%;
  height: 100%;
}

.box1 {
  background-color: rgba(0,0,0,.1)
}
.box2 {
  background-color: rgba(0,0,0,.2)
}
.box3 {
  background-color: rgba(0,0,0,.3)
}
.box4 {
  background-color: rgba(0,0,0,.4)
}

input:checked + section:hover input {
  width: 20%;
}

input:checked + section:hover input:hover {
  width: 40%;
}

input:not(:checked) + section input {
  width: 5%;
}

input:not(:checked) + section input:checked {
  width: 85%;
}

input:checked + section > label {
  display: none;
}

label {
  position: absolute;
}

<input id="hidden" hidden type="radio" name="group"  class="box1" value="0" checked />
<section>
    <label for="hidden">
      X
    </label>
    <input type="radio" name="group"  class="box1" value="1"/>
    <input type="radio" name="group" class="box2" value="2"/>
    <input type="radio" name="group" class="box3" value="3"/>
    <input type="radio" name="group"class="box4" value="4"/>
</section>

Javascript 帮助：单击一个元素会影响该元素和其他元素

Javascript Help: Clicking an element affects that element AND other elements

javascript

html

css

设置：

Problem/Troubleshooting: