javascript - 为什么我的没有用这些 jquery 代码滑动？

Question

我想<div>在单击 a 时减小尺寸<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”后缀的字符串形式出现。看到这个。

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

顺便说一句，最好只使用jQuery 或纯 Javascript，而不是混合使用它们。

Answer 2

抛弃 onclick，抛弃 vanilla js。简单如下：

jsFiddle 示例

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。

希望能帮助到你。