在Prestashop CMS中使用jQuery页面
问题描述:
我想在CMS页面中使用一些代码,然后将代码位放在我在Prestashop Backoffice中创建的CMS页面中实现的html代码的末尾,但是,该代码的一部分工作,但其余的代码不起作用,不知道为什么。在Prestashop CMS中使用jQuery页面
所以基本上我有一个列表中的每个项目内的列表和一些div的页面。所以在jQuery中,我隐藏了所有的DIV(以及这个特定的部分),然后在每个我单击的项目中,我都有一个jQuery函数来切换底下的DIV的可见性。所以问题就在这里,那些代码似乎不起作用,我不知道为什么。
<h1>Cursos Magic Nails</h1>
<p>Temos um vasto leque de ofertas formativas à sua espera. Escolha um dos links abaixo e veja a nossa oferta formativa.</p>
<ul id="portefolio">
<li><img name="" src="" width="256" height="200" alt="" />Unhas
<div class="infos">
<h3>Cursos de Unhas de Gel e Acrílico</h3>
<ul>
<li>Curso de Técnicas de Unhas de Gel</li>
<li>Designer de Unhas de Gel</li>
<li>Curso de Art-Nail</li>
<li>Reciclagem para Profissionais</li>
</ul>
<ul>
<li>Curso de Acrílico</li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Manicure/Pedicure
<div class="infos">
<h3>Cursos de Manicure/Pedicure</h3>
<ul>
<li>Curso de Manicure</li>
<li>Curso de Pedicure</li>
<li>Pack 3 Cursos (Manicure/Pedicure e Depilação)</li>
<li>Curso 3 em 1<span>PROMO</span></li>
<li>Manicure e Pedicure<span>PROMO</span></li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Pestanas
<div class="infos">
<h3>Cursos de Pestanas</h3>
<ul>
<li>Curso de Alongamento de Pestanas<span>NOVO</span></li>
<li>Curso de Permanente de Pestanas<span>NOVO</span></li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Depilação
<div class="infos">
<h3>Cursos de Depilação</h3>
<ul>
<li>Curso de Depilação</li>
<li>Curso de Depilação com Linha<span>NOVO</span></li>
<li>Curso de Depilação<span>PROMO</span></li>
</ul>
<ul>
<li>Pack 3 Cursos</li>
<li>Curso 3 em 1<span>PROMO</span></li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Massagens
<div class="infos">
<h3>Cursos de Massagens</h3>
<ul>
<li>Curso de Massagens de Relaxamento</li>
<li>Curso de Massagens das Pedras Quentes</li>
<li>Curso de Massagens de Estética</li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Rosto
<div class="infos">
<h3>Cursos de Rosto</h3>
<ul>
<li>Curso de Rosto</li>
</ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Glitter Tattoo
<div class="infos">
<h3>Cursos de Glitter Tattoo</h3>
<ul>
<li>Curso de Glitter Tattoo</li>
</ul>
</div>
</li>
</ul>
而jQuery的页面中嵌入:
<script type="text/javascript">
$(document).ready(function() {
//Hide that DIV
$('#page #portefolio li .infos').hide(); //Hide/close all containers
//On Click
$('#page #portefolio li').click(function(){
//If immediate next container is closed...
if($(this).parent('#page #portefolio li .infos').is(':hidden')){
$('#page #portefolio li').removeClass('active').parent('#page #portefolio li .infos').slideUp();
$(this).addClass('active').parent('#page #portefolio li .infos').slideDown();
} else {
$(this).removeClass('active').parent('#page #portefolio li .infos').slideUp();
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
所以上述//在点击的部分是不工作的一部分。
您可以测试在这个环节: Link
答
你的主要问题是你穿越找到合适的.infos
的div的方式。 jQuery有非常优雅的遍历方法,可以使这更简单。
这里是一个活生生的例子:http://jsfiddle.net/WbUPt/1/
// Cache your jQuery selector... you don't need to find it over and over again
var $portefolio = $('#portefolio');
// Hide/close all containers
$portefolio.find('.infos').hide();
// Add a single event to the container for better performance
$portefolio.on('click', 'li', function (event) {
var $this = $(event.currentTarget);
if ($this.hasClass('active')) {
// Deactivate
$this.removeClass('active');
$this.find('.infos').slideUp();
} else {
// Activate
$this.addClass('active');
$this.find('.infos').slideDown();
}
});