Question

工作原理

我目前有一个包含Isotope的列表，其中显示了所有类别的帖子。单击某个类别时，它会显示该类别中的所有帖子。这工作正常。 Please see page if it's hard to understand

<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>

问题

问题是当点击第二个cateogry时，它还会显示第一个类别文本。等等。

Please see page if you have not done it yet

解决方案

最好的解决方案是，如果点击了另一个列表，它会被重置为默认值，然后添加另一个div。

你能提供一个有效的解决方案吗？

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

Answer 2

您可以使用data-*前缀自定义属性来保留要显示的容器div。

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

＆＃13;

$(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
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: