单击时可见列表行下方的全宽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）; }

Answer 2

我已经创建了一个有效的Codepen，因此您可以看到我所做的更改。 It's here

而不是使用$（document）.ready将click事件绑定到每个元素。而不是使用

$(element).on('click', function(){
  //actions here
});

建议您只编写一个函数来处理每个元素（例如）

$('.class-for-element-to-be-clicked').on('click', function(){
  $('#'+$(this).attr('id')+'-text').toggleClass('text-display');
  $('#'+$(this).attr('id')+' .up-arrow').toggleClass('text-display');
});