Не совместимы Foundation 6 & jQuery 3

252

14 мая 2018, 02:00

Подскажите почему у меня не совместимы jquery 3 и foundation 6. Кто то говорит что они не совместимы, кто то говорит что нет поддержки. Кто знает и работает с этим?

Вот ссылка на такой же пример, только jquery 1 все работает тут

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.js"></script> 
 
<ul class="accordion" data-accordion data-allow-all-closed='true'> 
		  <li class="accordion-item is-active" data-accordion-item> 
		    <a href="#" class="accordion-title">Accordion 1</a> 
		    <div class="accordion-content" data-tab-content> 
		      Panel 1. Lorem ipsum dolor 
		    </div> 
		  </li> 
		  <li class="accordion-item" data-accordion-item> 
		    <a href="#" class="accordion-title">Accordion 2</a> 
		    <div class="accordion-content" data-tab-content> 
		      Panel 2. Lorem ipsum dolor 
		    </div> 
		  </li> 
		  <li class="accordion-item" data-accordion-item> 
		    <a href="#" class="accordion-title">Accordion 3</a> 
		    <div class="accordion-content" data-tab-content> 
		      Panel 3. Lorem ipsum dolor 
		    </div> 
		  </li> 
		</ul>

Answer 1

После того как jQuery 3 перестал поддерживать функцию load у foundation отвалилось пару компонентов. Фикс пришел после версии 6.4.*

Если интересно почитать

$(document).foundation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script> 
 
 
<ul class="accordion" data-accordion data-allow-all-closed='true'> 
  <li class="accordion-item is-active" data-accordion-item> 
    <a href="#" class="accordion-title">Accordion 1</a> 
    <div class="accordion-content" data-tab-content> 
      Panel 1. Lorem ipsum dolor 
    </div> 
  </li> 
  <li class="accordion-item" data-accordion-item> 
    <a href="#" class="accordion-title">Accordion 2</a> 
    <div class="accordion-content" data-tab-content> 
      Panel 2. Lorem ipsum dolor 
    </div> 
  </li> 
  <li class="accordion-item" data-accordion-item> 
    <a href="#" class="accordion-title">Accordion 3</a> 
    <div class="accordion-content" data-tab-content> 
      Panel 3. Lorem ipsum dolor 
    </div> 
  </li> 
</ul>

Answer 2

Данная ошибка спровоцирована $(window).load() функцией в foundation.js

JQMIGRATE: jQuery.fn.load() is deprecated

Дело в том что функцию в foundation поправили только начиная с 6.2.4. Так же в конце должно вызываться jQuery(document).foundation();

<ul class="accordion" data-accordion data-allow-all-closed='true'> 
    <li class="accordion-item is-active" data-accordion-item> 
        <a href="#" class="accordion-title">Accordion 1</a> 
        <div class="accordion-content" data-tab-content> 
            Panel 1. Lorem ipsum dolor 
        </div> 
    </li> 
    <li class="accordion-item" data-accordion-item> 
        <a href="#" class="accordion-title">Accordion 2</a> 
        <div class="accordion-content" data-tab-content> 
            Panel 2. Lorem ipsum dolor 
        </div> 
    </li> 
    <li class="accordion-item" data-accordion-item> 
        <a href="#" class="accordion-title">Accordion 3</a> 
        <div class="accordion-content" data-tab-content> 
            Panel 3. Lorem ipsum dolor 
        </div> 
    </li> 
</ul> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.js"></script> 
<script> 
    jQuery(document).foundation(); 
</script>