文章/答案/技术大牛

发布

问在生成的列表上切换
EN

Stack Overflow用户

提问于 2018-01-31 13:50:33

回答 2查看 31关注 0票数 0

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

我目前正在工作的网站，有一个自定义的帖子类型档案网页，并在它上，我是分组的术语在列表中。每个术语都有自己的<ul>。现在我试图只显示4个列表项目，并将其他项目放在一个按钮下。我试着使'term-list'类和'see-all'类动态化，方法是将它们建立在$term->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最接近的一个，所以没有运气。

javascript

php

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-31 15:18:37

您可以使用.parent()使其与单击“查看全部”按钮的元素相关联：

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

示例

票数 0

Stack Overflow用户

发布于 2018-01-31 15:33:04

它可能就像添加一个单击处理程序触发器来隐藏它们一样简单？注意，这里我的假设是'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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48543776

复制

相似问题

问在生成的列表上切换
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在生成的列表上切换EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在生成的列表上切换
EN