使用jQuery显示部分滑动内容

我有一个元素，我想在默认情况下显示它的一部分（比如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;
}

var sliderHeight=“100px”；
$（'.slider'）。每个（函数（）{
var current=$（此）；
current.attr（“box_h”，current.height（））；
});
$（'.slider'）.css（“高度”，滑块高度）；
$（“.slider_menu”）.html（“”）；
$（“.slider_菜单a”）。单击（函数（）{
openSlider（）；
返回false；
});
函数openSlider（）{
var open_height=$（'.slider'）.attr（“box_h”）+“px”；
$（'.slider'）。设置动画({
“高度”：开启高度
}, {
持续时间：“慢”
});
$（“.slider_menu”）.html（“”）；
$（“.slider_菜单a”）。单击（函数（）{
闭合滑块（）；
});
返回false；
}
函数closeSlider（）{
$（'.slider'）。设置动画({
“高度”：滑块高度
}, {
持续时间：“慢”
});
$（“.slider_menu”）.html（“”）；
$（“.slider_菜单a”）。单击（函数（）{
openSlider（）；
});
返回false；
}

脚本应该是这样的：

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

var sliderHeight=“100px”；
$（'.slider'）。每个（函数（）{
var current=$（此）；
current.attr（“box_h”，current.height（））；
});
$（'.slider'）.css（“高度”，滑块高度）；
$（“.slider_menu”）.html（“”）；
$（“.slider_菜单a”）。单击（函数（）{
openSlider（$（this.parent（）.prev（“ul.slider”），$（this.parent（））；
返回false；
});
函数openSlider（obj，slideMenu）{
var open_height=$（obj）.attr（“box_h”）+“px”；
$（对象）。设置动画({
“高度”：开启高度
}, {
持续时间：“慢”
});
$（slideMenu.html（“”）；
$（slideMenu）.children（“a”）。单击（函数（）{
关闭滑块（obj，滑块单元）；
});
返回false；
}
功能关闭滑块（obj、SLIDEMU）{
$（对象）。设置动画({
“高度”：滑块高度
}, {
持续时间：“慢”
});
$（slideMenu.html（“”）；
$（slideMenu）.children（“a”）。单击（函数（）{
openSlider（obj，slideMenu）；
});
返回false；
}

---

希望这能解决你的问题

也许你可以向OP解释你改变了什么，问题出在哪里。这很有效！非常感谢。因此，看起来您将这些项作为函数的参数传入。我以为这就是写作的方法，但我不知道该怎么写。谢谢此外，我以前也遇到过这个问题，但当我试图关闭一个部分时，它似乎一直跳到页面顶部。通常这是因为“returnfalse”不存在，但我在这两个函数中都包含了它。知道是什么导致了这种情况吗？@Andrew，我想这是因为您在Expense/collapse超链接中为href属性指定了哈希。尝试移除它们，然后再次检查。@Kundan有什么我应该替换的吗？当我完全删除它时，当我尝试折叠该部分时，它似乎会刷新页面。