Как переключить дополнительный контент после нажатия на связанный div в цикле - PullRequest
Новая
       15

Как переключить дополнительный контент после нажатия на связанный div в цикле

0 голосов
/ 20 апреля 2020

Я работаю с полями ACF и дочерними записями в Wordpress. Я использую flickity для отображения содержимого l oop на слайдере, и все работает хорошо.

Я пытался выполнить sh следующее. Когда вы выбираете div в слайдере, переключаете дополнительное связанное содержимое в div или отдельном разделе ниже. То, чего я хочу достичь, можно увидеть на следующих рисунках пользовательского интерфейса:

опции слайдера

опция открытия слайдера

После найти этот пост http://jsfiddle.net/sTve6/1/ я думаю, что это довольно близко, но у меня есть al oop, и у каждого div есть уникальный идентификатор, и я изо всех сил пытался показать соответствующую дополнительную информацию в связанном контейнере.

Я пытался использовать дополнительное содержимое в качестве дочернего элемента родительского элемента таким образом, чтобы переключать их, но из-за переполнения ползунка и других проблем я не думаю, что это хороший способ приблизиться к этому.

Codepen ИЛИ 

$(".carousel-cell").click(function(e) {
    e.stopPropagation();
    $(this).find('>.childshow').toggle();        
});
/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.flickity-viewport {

    overflow: visible!important;
}

/* force scrollbar, not necessary, but may reduce gaps. Setting a max-height on .carousel also works */

.carousel {
  background: #2a2a2a;
  overflow:none;
}

.carousel img {
  display: block;
  height: 200px;
}
.childshow{

padding:2em;
background:red;
color:white;
}
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"  href="https://npmcdn.com/flickity@2/dist/flickity.css">

<h1>Example slider test</h1>

<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true }'>

  <!-- wpv-loop-start -->
  <div id="[wpv-post-id]" class="carousel-cell">
        <a href="#"  >
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" /></a>
    <div class="childshow" style="display:none">child 1
      </div>
    
  </div>
  <div id="[wpv-post-id]" class="carousel-cell">
    <a href="#"  >
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" /></a>
     <div class="childshow" style="display:none">child 2
      </div>
  </div>
  <div id="[wpv-post-id]" class="carousel-cell">
    <a href="#"  >
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" /><a>
       <div class="childshow" style="display:none">child 3
      </div>
  </div>
  <div id="[wpv-post-id]" class="carousel-cell">
        <a href="#"  >
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" /></a>
     <div class="childshow" style="display:none">child 4
      </div>
</div>
    <!-- wpv-loop-end -->

  </div>

Любая помощь идей или примеров кода очень ценится, поскольку я не знаю, как поступить.

Заранее спасибо .

...