0

サムネイル ( .framesButton) をクリックすると、スライドしてパネルが開きます。.frameSelectedまた、小さな黒い三角形の背景をimgの親に追加するクラス ( ) も追加したいだけです。これは<li>、トグルしているときに同じサムネイルをクリックしたりオフにしたりすると、現時点で機能します。しかし、スライド パネルがまだ開いているときに別のサムネイルをクリックすると、三角形が表示されますが、パネルは閉じています。ここで見ることができます：

http://oaeyewear.4pixels.co.uk/brands.html

これまでの私のコードは次のとおりです。

$('.framesButton').click(function() {
      $(this).parent().toggleClass('frameSelected');
      $(this).parent().siblings().removeClass('frameSelected');
});

残念ながら、私のjQueryは、必要なものをコードに変換するにはまだ基本的です。

4

2 に答える 2

0

要するに、これを行うだけです：

$(".framesButton").click(function(){  
    $(".lensesDetail").slideUp('slow',function(){
       $(".lensesDetail").slideDown('slow');
    });  
    $(this).parent().toggleClass('frameSelected');
    $(this).parent().siblings().removeClass('frameSelected');
});
于 2013-02-22T11:46:29.917 に答える
0

コンテナの可視性を常に切り替えています

$(".framesButton").click(function(){  
    $(".lensesDetail").slideToggle('slow');  
});

同じサムネイルがクリックされたかどうかは関係ありません。

解決策は、クリックされた要素が以前にクリックされた要素であるかどうかをテストすることです。これは、その親に class があるかどうかをテストすることで実行できますframeSelected。はいの場合はコンテナーを非表示にします。そうでない場合は、開いたままにするか、開きます。

両方のクリック イベント ハンドラーを次のように組み合わせます。

$('.framesButton').click(function() {
    var $parent = $(this).parent();

    if ($parent.hasClass('frameSelected')) {
        // toggle visibility of container
        $('.lensesDetail').slideToggle('slow');  
    }
    else {
        // show the container - won't do anything if already open
        $('.lensesDetail').slideDown('slow');
    }

    $parent.toggleClass('frameSelected')
        .siblings('.frameSelected').removeClass('frameSelected');
});

解決策は、要素にどの程度正確に .lensesDetail情報を入力するかによって異なります。つまり、サムネイルごとに 1 つ、行ごとに 1 つ、またはリスト全体に 1 つ持つかどうかです。
これを理解したら、上記のソリューションを調整する必要があります。

于 2013-02-22T11:42:01.483 に答える