1

デフォルトで一部を表示したい要素（たとえば100px）がありますが、リンクをクリックして残りを表示します。jQueryの組み込みslideToggleでは不可能と思われるため、解決策があるこのサイトを見つけました。このソリューションは（以下のコードに示すように）機能しますが、同じページ上の複数のスライダーでは機能しません。どういうわけか、特定のスライダーのIDで「.slider」を切り替える必要があることはわかっていますが、その方法がわかりません。現在のIDを取得する必要がありますが、これをopenSlider関数とcloseSlider関数で使用しても機能しません。誰か助けてもらえますか？それは私には理解できないような単純な問題だと確信しています。

HTML

<ul class="slider" id="1-slider">
  <li><img src="http://dummyimage.com/490x340" alt="#" /></li>
  <li><img src="http://dummyimage.com/490x340" alt="#" /></li>
  <li><img src="http://dummyimage.com/490x340" alt="#" /></li>
</ul> <!-- .images -->

<div class="slider_menu"></div>

jQuery

var sliderHeight = "100px";
$('.slider').each(function() {
    var current = $(this);
    current.attr("box_h", current.height());
});

$('.slider').css("height", sliderHeight);
$(".slider_menu").html('<a href="#" class="expand">Expand</a>');
$(".slider_menu a").click(function() {
    openSlider();
    return false;
});

function openSlider() {
    var open_height = $('.slider').attr("box_h") + "px";
    $('.slider').animate({
        "height": open_height
    }, {
        duration: "slow"
    });
    $(".slider_menu").html('<a href="#" class="expand">Collapse</a>');
    $(".slider_menu a").click(function() {
        closeSlider();
    });
    return false;
}

function closeSlider() {
    $('.slider').animate({
        "height": sliderHeight
    }, {
        duration: "slow"
    });
    $(".slider_menu").html('<a href="#" class="expand">Expand</a>');
    $(".slider_menu a").click(function() {
        openSlider();
    });
    return false;
}
4

1 に答える 1

0

スクリプトは次のようになります：

var sliderHeight = "100px";
$('.slider').each(function() {
    var current = $(this);
    current.attr("box_h", current.height());
});

$('.slider').css("height", sliderHeight);
$(".slider_menu").html('<a href="#" class="expand">Expand</a>');
$(".slider_menu a").click(function() {
    openSlider($(this).parent().prev("ul.slider"), $(this).parent());
    return false;
});

function openSlider(obj, slideMenu) {
    var open_height = $(obj).attr("box_h") + "px";
    $(obj).animate({
        "height": open_height
    }, {
        duration: "slow"
    });
    $(slideMenu).html('<a href="#" class="expand">Collapse</a>');
    $(slideMenu).children("a").click(function() {
        closeSlider(obj, slideMenu);
    });
    return false;
}

function closeSlider(obj, slideMenu) {
    $(obj).animate({
        "height": sliderHeight
    }, {
        duration: "slow"
    });
    $(slideMenu).html('<a href="#" class="expand">Expand</a>');
    $(slideMenu).children("a").click(function() {
        openSlider(obj, slideMenu);
    });
    return false;
}

これで問題が解決することを願っています!!

于 2012-10-09T18:08:20.117 に答える