为什么我的<div>没有使用这些jquery代码滑动？</div>

Question

点击<div>时，我希望减少<a>的尺寸。但它不起作用。

Javascript代码 （divheight是一个全局变量）

function jamsho(id) {
  var idd=id.substr(1);
  alert(document.getElementById(idd).style.height);

  if(document.getElementById(idd).style.height != 30) {
    $(id).stop().animate({height:30}, 700);
    divheight=document.getElementById(idd).style.height;
  } else if (document.getElementById(idd).style.height == "30px") {
    $(id).animate({height:divheight}, 700);
  }
}

并调用函数：

<div class="linkbox" id="linksbox">
    <a id="Titr" onClick="jamsho('#linksbox')"> پیوند ها</a>
    <a href="http://rawanonline.com" target="_newtab">سایت روان آنلاین</a>
</div>

Answer 1

您确定满足此条件document.getElementById(idd).style.height!=30吗？

我认为属性height是带有“px”sufix的 string 。 See this

因此，工作可能是if (document.getElementById(idd).style.height!="30px")。

BTW，使用仅 jQuery或纯Javascript是最好的做法，不要混用它们。

Answer 2

放弃onclick，抛弃香草js。它很简单如下：

jsFiddle Example

HTML

<div class="linkbox" id="linksbox">
        <a id="Titr"> پیوند ها</a>
        <a href="http://rawanonline.com" target="_newtab">سایت روان آنلاین</a>
</div>

的jQuery

$('#Titr').click(function(e) {
    e.preventDefault();
    var par = $(this).parent();
    par.animate({height:par.height()==30?'':30},700);
});

如果你想要更“动态”的东西：

$('.linkbox').on('click', 'a:first', function(e) {
    e.preventDefault();
    var par = $(this).parent();
    par.animate({height:par.height()==30?'':30},700);
}); 

请注意，上一个解决方案仅适用于jQuery 1.7及以上版本，对于旧版本，请将.on替换为.delegate

Answer 3

我认为你不能将jQuery动画应用于非jQuery对象

function jamsho(id) {
alert($(id).css("height");

 if($(id).css("height")!=30)
 {
    $(id).stop().animate({height:30},700);
    divheight=$(id).css("height");

 }
 else if ($(id).css("height")==30)
 {
    $(id).animate({height:divheight},700);

 }
}

Answer 4

您可以将jQuery用于所有功能，而不是部分功能：

function jamsho(id)
{
    var $this = $(id);
    alert($this.height());

    if ($this.height() != 30)
    {
        $this.stop().animate({height:30},700);
        divheight = $this.height();
    }
    else if ($this.height() == 30)
    {
        $this.animate({height:divheight},700);
    }
}

Answer 5

尝试这样的事情：

var $div = $('#linksbox'),
    divHeight = $div.height();

$('#Titr').click(function() {
    if (!$div.hasClass('expanded')) {
        $div.animate({height: 40}, 700, function() {
            $(this).addClass('expanded');
        });
    }
    else {
        $div.animate({height: divHeight}, 700, function() {
            $(this).removeClass('expanded');
        });
    }
});

http://jsfiddle.net/ZqEZ5/

一些注意事项：

• 无需使用document.getElementById和jQuery
• 不要使用内联事件处理程序onClick。

希望它有所帮助。