Question

一个小小的免责声明 - 我在jQuery非常非常新鲜

我目前正在开发一个拥有自定义帖子类型存档页面的网站，并在其上我将该术语分组在列表中。每个术语都有自己的<ul>。现在我试图只显示4个列表项，并将其他项放在切换项下。我尝试将'term-list'类和'see-all'类动态化，基于$ term-＆gt; slug。这将有效，但我最终必须为每个术语块编写一个函数，这是我想要防止的。

我的代码：

<div class="overview-block-travel column one_third">
  <div class="overview-block-travel-inner">
    <?php $image = get_field('country_flag_image', $term); ?>
      <img class="country-flag" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

      <h3 class="overview-block-country-head">
        <?php echo $term->name ?>
      </h3>

      <ul class="term-list">
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <li class="post-listing" id="post-<?php the_ID(); ?>">
          <a href="<?php the_permalink(); ?>">
            <?php echo get_template_part('assets/svg/arrow-right-icon.svg'); ?>
            <?php the_title(); ?>
          </a>
        </li>

        <?php endwhile; ?>
      </ul>

      <span class="see-all">See all routes</span>
  </div>
</div>

我的渲染html：

jQuery('.see-all').on('click', function() {
  jQuery('.overview-block-travel-inner')
    .find('ul.term-list li:nth-of-type(1n+5)').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overview-block-travel-inner">
  <h3 class="overview-block-country-head">The Netherlands</h3>
  <ul class="term-list">
    <li class="post-listing" id="post-910">
      <a href="/test-6/">test 6</a>
    </li>
    <li class="post-listing" id="post-908">
      <a href="/test5/">test5</a>
    </li>
    <li class="post-listing" id="post-906">
      <a href="/test4/">test4</a>
    </li>
    <li class="post-listing" id="post-904">
      <a href="/test3/">test3</a>
    </li>
    <li class="post-listing" id="post-743">
      <a href="/test-route-2/">test route 2</a>
    </li>
    <li class="post-listing" id="post-737">
      <a href="/test-cycling-route/">Test cycling route</a>
    </li>
  </ul>
  <span class="see-all">See all routes</span>
</div>
<div class="overview-block-travel-inner">
  <h3 class="overview-block-country-head">The Mountians</h3>
  <ul class="term-list">
    <li class="post-listing" id="post-710">
      <a href="/test-6/">test 6</a>
    </li>
    <li class="post-listing" id="post-778">
      <a href="/test5/">test5</a>
    </li>
    <li class="post-listing" id="post-706">
      <a href="/test4/">test4</a>
    </li>
    <li class="post-listing" id="post-704">
      <a href="/test3/">test3</a>
    </li>
    <li class="post-listing" id="post-643">
      <a href="/test-route-2/">test route 2</a>
    </li>
    <li class="post-listing" id="post-637">
      <a href="/test-cycling-route/">Test cycling route</a>
    </li>
  </ul>
  <span class="see-all">See all routes 2</span>
</div>

我尝试了一些不同的方法，但我似乎无法让它工作。我最近的尝试是使用jQuery.each()，但我可能以错误的方式使用它。我也想过.find选项可能会解决它，但我认为它只是找到每个.overview-block-travel最接近的一个，所以那里没有运气。

Answer 1

您可以使用.parent()将所有内容相对于＆＃39;查看全部＆＃39;单击按钮：

jQuery('.see-all').on('click', function() {
  // `this` will be the 'see all' element that was clicked
  jQuery(this).parent()
    .find('ul.term-list li:nth-of-type(1n+5)').slideToggle();
});

Example

Answer 2

它可能就像添加点击处理程序触发器以便最初隐藏它们一样简单吗？请注意，我的假设是'overview-block-travel-inner'类的多个组，因此.closest()包含该类。

注意：为什么这样？如果您使用.closest('.overview-block-travel-inner')，那么如果您决定例如在“查看所有路线”上更改您的标记，例如通过包装它使其不同，那么它仍然有效，即我们可能会看到：

<label class="btn btn-primary active"><span class="see-all">See all routes</a></label>

那么.parent()就会失败。

jQuery('.see-all').on('click', function() {
  jQuery(this).closest('.overview-block-travel-inner')
    .find('ul.term-list li:nth-of-type(1n+5)').slideToggle();
}).trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overview-block-travel-inner">
  <h3 class="overview-block-country-head">The Netherlands</h3>
  <ul class="term-list">
    <li class="post-listing" id="post-910">
      <a href="/test-6/">test 6</a>
    </li>
    <li class="post-listing" id="post-908">
      <a href="/test5/">test5</a>
    </li>
    <li class="post-listing" id="post-906">
      <a href="/test4/">test4</a>
    </li>
    <li class="post-listing" id="post-904">
      <a href="/test3/">test3</a>
    </li>
    <li class="post-listing" id="post-743">
      <a href="/test-route-2/">test route 2</a>
    </li>
    <li class="post-listing" id="post-737">
      <a href="/test-cycling-route/">Test cycling route</a>
    </li>
  </ul>
  <span class="see-all">See all routes</span>
</div>
<div class="overview-block-travel-inner">
  <h3 class="overview-block-country-head">The Mountians</h3>
  <ul class="term-list">
    <li class="post-listing" id="post-710">
      <a href="/test-6/">test 6</a>
    </li>
    <li class="post-listing" id="post-778">
      <a href="/test5/">test5</a>
    </li>
    <li class="post-listing" id="post-706">
      <a href="/test4/">test4</a>
    </li>
    <li class="post-listing" id="post-704">
      <a href="/test3/">test3</a>
    </li>
    <li class="post-listing" id="post-643">
      <a href="/test-route-2/">test route 2</a>
    </li>
    <li class="post-listing" id="post-637">
      <a href="/test-cycling-route/">Test cycling route</a>
    </li>
  </ul>
  <span class="see-all">See all Mountian routes 2</span>
</div>

在生成的列表上滑动

2 个答案: