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