添加过渡以隐藏/显示列表项

Question

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

目前，我只使用display:none 和display:block。由于您无法在这些元素上放置过渡，因此我想知道最好的方法。

我不能使用 opacity:0;和可见性：0 因为它在应该隐藏正确 li 的 ul 中留下很大的间隙。 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>