jquery - 添加转换以隐藏/显示列表项

Question

基本上，我有一个过滤列表，它使用 jquery 隐藏/显示大型 UL 中的正确元素。

目前，我只使用display:none 和display:block。由于您不能对这些元素进行过渡，我想知道解决此问题的最佳方法。

我不能使用不透明度:0；和 visibility:0 因为它在 ul 中留下了很大的空隙，在这些空隙中应该隐藏正确的 li。 Display block/none 工作正常，但我想添加一个过渡，因此当单击该元素时，正确的 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/

Answer 1

我建议你使用jQuery slideToggle (或分别 jquery slideUp 和 jquery slideDown)。如您所见，我为列表上方过滤器的每个元素提供了一个数据国家，并为列表的每个元素添加了一个具有相同文本的类。因此，当我单击过滤器时，它会显示类等于数据国家过滤器的元素。如果您需要进一步的帮助，请告诉我。 :)

$('.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>