1

私はここでこのコードを使用しています：

$(document).ready(function(){

$('a[href*=#]').bind('click', function(){
    var $href = $(this).attr('href')
    $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
    return false;
});

$(".category-slider-trigger").click(function(e){
    e.preventDefault;
    $this = $(this);
    var isVisible = $this.next().is(":visible");

    $(".category-slider-content").stop(true,true).slideDown('slow');
    $(".trigger-symbol").attr('src', '/images/plus.png');

    if (!isVisible) {
        $this.find(".trigger-symbol").attr('src', '/images/minus.png');
        $this.next().stop(true,true).slideUp('slow');
    }

    return false;
});

}）;

このhtmlについて：

<div class="category-slider-content">
<div class="grid_1">&nbsp;</div>
<div class="grid_10 category-filter-area">
    <a class="stock-latest-additions" href="/stock/latest-additions">Latest additions</a>
    <?
    foreach ($stock_categories as $cat) {
        echo("<h2 class=\"stock-category-title\">".$cat['title'].":</h2>");
        echo("<ul class=\"stock-categories-list\">");
        foreach ($cat['sub_categories'] as $sub_cat) {
            echo("<li><a href=\"/stock/".$util->formatCategoryParam($sub_cat['title'])."\">".$sub_cat['title']."</a></li>");
        }
        echo("</ul>");
        echo("<div class=\"clear\"></div>");
    }
    ?>
</div>
<div class="grid_1">&nbsp;</div>

カテゴリの表示/非表示

しかし、機能に問題があります。リンクをクリックすると、カテゴリが上から表示されて下にスライドしますが、上にスライドすることはありません。

ここにjsFiddleを設定しました... http： //jsfiddle.net/CwP8w/

助言がありますか？

ありがとう、R

4

3 に答える 3

1

作業デモ http://jsfiddle.net/GmpZb/3/

優れたAPI：http ://api.jquery.com/slideToggle/

slideToggleを使用して表示と非表示の場合にのみ実行する場合は、完全なisVisibleロジックを回避できます。

これは役に立ちます。B-）

コードが変更されました

$(".category-slider-content").stop(true,true).slideToggle('slow');

完全なコード

$(document).ready(function() {

    $('a[href*=#]').bind('click', function() {
        var $href = $(this).attr('href')
        $('html,body').animate({
            scrollTop: $($(this).attr('href')).offset().top
        }, 1200, 'easeInOutExpo');
        return false;
    });

    $(".category-slider-trigger").click(function(e) {
        e.preventDefault;
        $this = $(this);
        var isVisible = $this.next().is(":visible");

        $(".category-slider-content").stop(true, true).slideToggle('slow');
        $(".trigger-symbol").attr('src', '/images/plus.png');

        if (!isVisible) {

            $this.find(".trigger-symbol").attr('src', '/images/minus.png');
            //$this.next().stop(true,true).slideUp('slow');
        }

        return false;
    });

});​
于 2012-05-26T12:49:55.007 に答える
0

デモ

$('a[href*=#]').bind('click', function(){
    var $href = $(this).attr('href');
    $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
    return false;
});

$(".category-slider-trigger").click(function(e){
    e.preventDefault;
    $this = $(this);
    var isVisible = $('.category-slider-content').is(":visible");
        
    if (!isVisible) {
        $('.category-slider-content').slideDown();
        $this.find(".trigger-symbol").attr('src', '/images/minus.png');
    }else{
        $('.category-slider-content').slideUp();
        $this.find(".trigger-symbol").attr('src', '/images/plus.png');
    }
                    
    return false;
});
于 2012-05-26T12:53:19.790 に答える
0

最初の関数が何をするのか本当にわかりませんが、とにかく：

$(function() {
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault;        
        $('html,body').animate({scrollTop: $(this.href).offset().top}, 1200, 'easeInOutExpo');
    });

    $(".category-slider-trigger").on('click', function(e) {
        e.preventDefault;
        $(".category-slider-content").stop(true, true).slideToggle('slow');
        $(".trigger-symbol").attr('src', $(this).is(':visible')?'/images/plus.png':'/images/minus.png');
    });
});​

フィドル

于 2012-05-26T13:06:36.823 に答える