Question

这是我的代码：https://jsfiddle.net/ucffyp3v/43/

如上所述，我想只展示这个div的50px高度，并显示其余的一次显示更多点击。

js似乎无法显示div的其余部分。

$("document").ready(function(){
$(".show-more").click(function(){
if($(".mydiv").css("height")!="50px"){
  $(".mydiv").slideDown();
}
else{
  $(".mydiv").slideUp();
}
}
}

Answer 1

也许您正在寻找：working link

$( "document" ).ready(function() {
  $(".show-more").click(function(){
    if($(".mydiv").css("height") === "50px"){
      $(".mydiv").css("height", 'auto');
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").css("height", '50px');
      $(".mydiv").slideUp();
    }
  });
});

但我建议您可以移动<h2>Hello</h2>以使滚动顺利进行。

Answer 2

启动时出现语法错误。它似乎工作。

https://jsfiddle.net/3kor5bup/2/a

$("document").ready(function() {
  $(".show-more").click(function() {
    if ($(".mydiv").css("height") != "50px") {
      $(".mydiv").slideDown();
    } else {
      $(".mydiv").slideUp();
    }
  });
});

Answer 3

语法错误：Working Example

$("document").ready(function(){
  $(".show-more").click(function(){
    if($(".mydiv").css("height")!="50px"){
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").slideUp();
    }
  });
});

我认为您正在寻找onchange，slideToggle功能。

Answer 4

也许您想在此处查看此问题：jQuery Toggle Text?

有一些很好的例子说明了你想要实现的目标，比如用户@firstandlastpost这里的小提琴：

https://jsfiddle.net/b5u14L5o/

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            console.log(stateOne, stateTwo, $(this).text());
            $(this).text() !== stateTwo  && stateOne
            ? $(this).text(stateTwo)
            : $(this).text(stateOne);
        });  
    }
});

$('button').on('click', function() {
    $(this).toggleText('Show it!', 'Hide it!').next().toggle();
});

对于你的例子，我适应了这个：https://jsfiddle.net/ucffyp3v/87/

Answer 5

您可以使用slideToggle功能，请参阅此工作示例：

https://jsfiddle.net/g0jy9Lhm/

$(document).ready(function(){
  $(".show-more").click(function(){
    $(".mydiv").slideToggle("slow");
  });
});

如何仅显示div的某个高度，并在单击时显示其余部分

5 个答案: