javascript - 带有切换 div 显示/隐藏的列表

Question

这个想法是，用户可以通过单击下载来下载文件，也可以通过单击打开/显示/其他方式在浏览器中以 png 格式查看文件。

我使用此处找到的解决方案来实现显示/隐藏切换 div 功能。它对一个列表项非常有效，但我正试图找到一种方法来将它与大约 30 个条目的列表一起使用。我知道我可以复制并粘贴代码并为 div 和 anchor 创建新类，但肯定有更好的方法。我是 Web 开发的新手，所以如果解决方案显而易见，我深表歉意。

这是一个例子。我希望每个条目都控制它自己的 div 切换(点击打开)。

$('.list-link').click(function() {
  $('.test-div').show(500);
  $('.list-link').hide(0);
  $('.Hide').show(0);
});

$('.Hide').click(function() {
  $('.test-div').hide(500);
  $('.list-link').show(0);
  $('.Hide').hide(0);
});

.list-entry {
  background-color: darkgrey;
  width: 200px;
  margin-bottom: 10px;
  list-style: none;
}

.test-div {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
}

.Hide {
  display: none;
}

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<ul class="list">
  <li class="list-entry">
    <p> test 1</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
  </li>
  <div class="test-div"></div>
  <li class="list-entry">
    <p> test 2</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
  </li>
  <div class="test-div"></div>
  <li class="list-entry">
    <p> test 3</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
  </li>
  <div class="test-div"></div>
</ul>

https://codepen.io/pen/RwgaxRQ

提前致谢。

Answer 1

要执行您需要的操作，您可以使用 jQuery 的 DOM 遍历方法(例如 closest() 和 find())来关联引发 的元素click 事件传递给您想要影响的周围的人。

另请注意，您的 HTML 无效。 ul只能包含li元素，不能包含div，所以需要稍微改变结构。

话虽如此，试试这个:

$('.list-link').click(function() {
  let $li = $(this).closest('li');
  $li.find('.test-div').show(500);
  $li.find('.list-link').hide();
  $li.find('.Hide').show();
});

$('.Hide').click(function() {
  let $li = $(this).closest('li');
  $li.find('.test-div').hide(500);
  $li.find('.list-link').show();
  $li.find('.Hide').hide();
});

.list-entry {
  background-color: darkgrey;
  width: 200px;
  margin-bottom: 10px;
  list-style: none;
}

.test-div {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
}

.Hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
  <li class="list-entry">
    <p> test 1</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
  <li class="list-entry">
    <p> test 2</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
  <li class="list-entry">
    <p> test 3</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
</ul>

另请注意，我更新了演示以使用 jQuery v3.6.0，因为 2.1.4 非常过时。