javascript - 单击时可见列表行下方的全宽 div

Question

我想要一系列图像行(大小相同)，单击这些图像后，会在下面打开一个填满屏幕宽度的描述(见下图)。

我能够做到这一点的唯一方法是分别列出 5 个元素，然后将所有描述放在这些元素下面。

然而，这很不方便，意味着我被困在每行 5 个元素上，因此无法使其响应。这也意味着很多乱七八糟的脚本。

有没有办法将所有 li 元素组合在一起，并将所有文本描述连接到它们的相关元素？还有一种方法可以在一个脚本中完成所有这些操作吗？

这是我到目前为止所管理的:

HTML

<ul>
    <li class="item" id="1"><img src="images/1.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="2"><img src="images/2.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="3"><img src="images/3.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="4"><img src="images/4.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="5"><img src="images/5.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
</ul>
<div id="1-text" class="description">
    <p>Filler text</p>
</div>
<div id="2-text" class="description">
    <p>Filler text</p>
</div>
<div id="3-text" class="description">
    <p>Filler text</p>
</div>
<div id="4-text" class="description">
    <p>Filler text</p>
</div>
<div id="5-text" class="description">
    <p>Filler text</p>
</div>
<ul>
    <li class="item" id="6"><img src="images/6.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="7"><img src="images/7.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="8"><img src="images/8.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="9"><img src="images/9.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>
    <li class="item" id="10"><img src="images/10.jpg" alt="" /><img class="up-arrow" src="images/up-arrow.png"></li>

</ul>
<div id="6-text" class="description">
    <p>Filler text</p>
</div>
<div id="7-text" class="description">
    <p>Filler text</p>
</div>
<div id="8-text" class="description">
    <p>Filler text</p>
</div>
<div id="9-text" class="description">
    <p>Filler text</p>
</div>
<div id="10-text" class="description">
    <p>Filler text</p>
</div>

脚本

$(document).ready(function(){
  $("#1").click(function(){
    $("#1-text").toggleClass("text_display")
    $("#1 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#2").click(function(){
    $("#2-text").toggleClass("text_display")
    $("#2 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#3").click(function(){
    $("#3-text").toggleClass("text_display")
    $("#3 .up-arrow").toggleClass("text_display")
  });
});
$(document).ready(function(){
  $("#4").click(function(){
    $("#4-text").toggleClass("text_display")
    $("#4 .up-arrow").toggleClass("text_display")
  });
});

CSS

.item {
    width: calc(20% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    padding: 0px;
    position: relative;
}

.description {
    display: none;
    position: relative;
}

.text_display {
    display: block;
}

提前致谢!

Answer 1

EXAPMPLE SOLUTION is here on jsbin

你可以改变你的CSS

.item { width: calc(19% - 10px); }

或

.item { width: calc(20% - 14px); }