基本上，我有一个过滤列表，使用jquery来隐藏/显示大型UL中的正确元素。
目前，我只使用display:none和display:block。由于你不能对这些元素进行转换，我想知道最好的方法。
我不能使用不透明度：0;和可见性：0因为它在ul中留下了大的空隙，其中应该隐藏正确的li。显示块/无效工作正常，但我想添加一个转换，所以当点击该项时，正确的li淡入并且应该隐藏的那些淡出。
<div class="jobs-filter">
<span>Filter by:</span>
<ul>
<li class="jobs-list"><a class="jobs filter item europe" href="#">Europe</a></li>
<li class="jobs-list"><a class="jobs filter item north-america" href="#">North America</a></li>
</ul>
</div>
<div class="listing">
<ul>
<li class="europe">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
</ul>
</div>
有谁知道最好的方法吗？
Codepen链接：https://codepen.io/Davabo/pen/wPaJKV/
答案 0 :(得分：0)
我建议您使用jQuery slideToggle（或单独使用jquery slideUp和jquery slideDown）。正如您所看到的，我为列表上方的过滤器的每个元素提供了一个数据国家，并为列表的每个元素添加了一个具有相同文本的类。因此，当我单击过滤器时，它会显示类等于data-nation过滤器的元素。如果您需要进一步的帮助，请告诉我。 ：）
$('.nation-trigger').click(function (e){
e.preventDefault()
var nation = $(this).data('nation')
$('.nation-element.active').slideUp().removeClass('active')
$('.nation-element.' + nation).slideDown().addClass('active')
}).nation-element{
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jobs-filter">
<span>Filter by:</span>
<ul>
<li class="jobs-list">
<a data-nation="europe" class="nation-trigger" href="#">
Europe
</a>
</li>
<li class="jobs-list">
<a data-nation="north-america" class="nation-trigger" href="#">
North America
</a>
</li>
</ul>
</div>
<div class="listing">
<ul>
<li class="europe nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="north-america nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">NA Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
<li class="europe nation-element">
<a target="_blank" href="#">
<div class="left">
<span class="title">Europe Test</span>
</div>
<div class="right">
<span class="job-arrow"></span>
</div>
</a>
</li>
</ul>
</div>