切换可见性 - 点击外部隐藏/重置

Question

工作原理

我目前使用Isotope创建了一个列表，显示所有帖子的类别。单击类别时，它会显示该类别中的所有帖子。这个功能正常工作。如果难以理解，请查看页面。

<ul id="filters-undercat" class="luft underkategori">
     <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
     <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans">Familiepakker</a></li>
     <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans">Markfyrverkeri</a></li>
</ul>

显示每个分类中的文本

我还希望显示代表每个分类的文本。这意味着当单击某个类别时，它会显示另一个包含文本的div。这部分已经实现了。我使用onclick="toggle_visibility来完成。

JS

function toggle_visibility(id) {
   var e = document.getElementById(id);
     if(e.style.display == 'none')
        e.style.display = 'block';
     else
        e.style.display = 'none';         
}

HTML

<ul id="filters-undercat" class="luft underkategori">
         <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
         <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans" onclick="toggle_visibility('familiepakker')">Familiepakker</a></li>
         <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans" onclick="toggle_visibility('markfyrverkeri')">Markfyrverkeri</a></li>
</ul>

每个类别中将显示的文本：

<div id="pakketekstholder">
        <div id="familiepakker" style="display:none;">Tekst om familie</div>
        <div id="markfyrverkeri" style="display:none;">Tekst om mark</div>
</div>

问题

问题在于当点击第二个分类时，它也显示了第一个分类的文本。依此类推。

如果您还没有查看页面，请单击链接

解决方案

最佳解决方案是，如果单击另一个列表，则将其重置为默认值，然后添加另一个 div。

请提供一个可行的解决方案好吗？

- Olen

Answer 1

在所有类别中添加一个类，例如"category"。然后可以迭代所有类别并设置可见性：

function toggle_visibility(id) {
   var all = document.getElementsByClassName('category');
   for(var i = 0; i < all.length; i++)
      all[i].style.display = (all[i].id == id && all[i].style.display == 'none')
         ? 'block' : 'none';
}

Fiddle

的翻译是：

{{链接1：Fiddle}}

。

- David Hedlund

---

谢谢。我已经尝试了你的解决方案，它非常有效。 - Olen

Answer 2

你可以使用以data-*为前缀的自定义属性来持久化显示哪个容器div。

在这里，我使用了现有的data-filter=".familiepakker"属性，并将其用于元素选择，并将它们添加为class="familiepakker"，以便可以使用类选择器。

$(function() {
  $('#filters-undercat li a').on('click', function(e) {
    e.preventDefault();
    $('#pakketekstholder > div').not($(this).data('filter')).hide(); //Hide All divs
    $($(this).data('filter')).toggle(); //Toggle to indent container
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters-undercat" class="luft underkategori">
  <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a>
  </li>
  <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans">Familiepakker</a>
  </li>
  <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans">Markfyrverkeri</a>
  </li>
</ul>

<div id="pakketekstholder">
  <div class="familiepakker" style="display:none;">Tekst om familie</div>
  <div class="markfyrverkeri" style="display:none;">Tekst om mark</div>
</div>

- Satpal

---

谢谢。然而，它不能正确地工作。你能再看一眼页面吗？页面链接 - Olen

@Olen，不要使用id="familiepakker"，而是使用class="familiepakker"，并且也要更改其他元素。 - Satpal

谢谢。然而，我仍然无法使其正常工作。按下“Alle”（表示显示全部）会导致一个空白的白色页面。按下“Familiepakker”只会显示文本，没有产品... 我只更改了“Familiepakker”和“Markfyrverkeri”，以防通过以下方法无法解决问题。 - Olen

我使用了 @David Hedlund 的解决方案，它非常好用。非常感谢你的帮助，@Satpal！:) - Olen