在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

來源

2012-12-28 Eduardo Ribeiro

你的主要問題是你穿越找到合適的.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(); 
    } 
});

來源

2012-12-28 21:08:54 Nate

在Prestashop CMS中使用jQuery頁面

回答

相關問題