0

CMS ページで少しのコードを使用しようとしています。Prestashop Backoffice で作成した CMS ページに実装されている html コードの最後に少しのコードを配置しましたが、そのコードの一部は機能しますが、残りは機能します。コードの一部が機能せず、その理由がわかりません。

したがって、基本的に、リストとリストの各項目内にいくつかの div を含むページがあります。そのため、jQuery を使用してすべての DIV を非表示にし (そしてこの特定の部分が機能します)、クリックする各項目で、下にある DIV の表示を切り替える jQuery 関数を使用します。問題はここにあります。そのコードは機能しないようで、その理由はわかりません。

<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>

つまり //On Click より上の部分が動かない部分です。

このリンクでそれをテストできます: リンク

4

1 に答える 1

0

あなたの主な問題は、正しい.infosdiv を見つけるためにトラバースする方法です。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-28T21:08:54.157 に答える