列表带有切换展示/隐藏的div

Question

列表带有切换展示/隐藏的div

3

这个想法是用户可以通过单击“下载”按钮下载文件，或通过单击“打开/显示/其他”在浏览器中将其视为 png。

我使用了在此找到的解决方案来实现 show/hide 切换 div 功能。它对于一个列表项完美地工作，但我试图找到一种方法来在大约 30 个条目的列表中使用此功能。我知道我可以只需复制和粘贴代码，并为 div 和 anchors 创建新类，但肯定有更好的方法。我是 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

Thanks in advance.

- adam

提供 CodePen 的链接很好，但请务必在问题中包含相关代码，以便人们不需要离开网站就能理解您的代码。 - Rory McCrossan

谢谢，我刚刚编辑了帖子以做到这一点，并收到消息说你比我更快。 - adam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

为了实现您所需的功能，您可以使用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非常过时。