0

So i have this function in my Js that gets called on a link onclick() event.

here is the HTML:

<li class="collapsed"> 
<span> 
<a href="#!" onclick="expand(this)">Directions</a> 
</span> 
<p>ajajgajajys agajgjgtajgtdja ajdtajtjate ajgdjagjd ajt</p> 
</li>

And here is the Javascript:

function expand(myElem)
{           
    if (myElem.parentNode.parentNode.style.height<100)
        myElem.parentNode.parentNode.style.height="100px";
    else
        myElem.parentNode.parentNode.style.height="45px";
}

Obviosuly, the code expands the li parent tags that the links are in. Originally, the li tags are set as height:45px; in CSS. Then they change to 100px and back. The problem im having is that the javascript only works twice. I cna click on the links oncde and expand the li's. Then i can click on them and collapse the li's. Then it doesn't want to work again. I was looking at my browsers errors and i found this:

"Error parsing value for 'height'. Declaration dropped.

After much trolling thru the interwebs I thought it might be because i'm not including the unit declarations in my js. But I am! 

myElem.parentNode.parentNode.style.height="45px"; ---- as you can see.

****NOTES: MY SOLUTION*****

For future referance for whoever stumbles on this thread, here's my solution:

HTML --> I ened up doing somethin glike:

<span class="heading">
     Link1
<span>

<span class="information">
     Info about Link1
</span>

<span class="heading">
     Link2
<span>

<span class="information">
     Info about Link2
</span>

And the Jquery was super simple:

$(document).ready(function() {

     $(".information").hide();


     $(".heading").click(function(){
          var item = $(this);

          item.next().slideToggle(500);          
     });
});

...super simple, works like a charm

4

3 回答 3

1

尝试使用replace和parseInt功能，如，

function expand(myElem)
{           
    if (parseInt(myElem.parentNode.parentNode.style.height.replace('px','')) < 100)
        myElem.parentNode.parentNode.style.height="100px";
    else
        myElem.parentNode.parentNode.style.height="45px";
}

您可以使用Jquery来简化它，

HTML

<li class="collapsed"> 
  <span> 
   <a href="#!" class="direction">Directions</a> 
  </span> 
  <p>ajajgajajys agajgjgtajgtdja ajdtajtjate ajgdjagjd ajt</p> 
</li>

脚本

$(function(){
    $('.direction').on('click',function(e){
       var ht= $('.collapsed').height()==100 ? 45 : 100;
       $('.collapsed').height(ht);
    });
});
于 2013-07-31T04:20:28.323 回答
0

尝试

if (parseInt(myElem.parentNode.parentNode.style.height)<100)
于 2013-07-31T04:10:11.010 回答
0

感谢大家的帮助。我发现，由于某种原因，在第二次将高度设置为 45px 之后，它不再注册为 int 了。idk y tho。为什么它第一次接受 100px 的声明并将其注册为 int 而不是第二次？奇怪。

无论如何，我尝试了 parseInt ，它就像一个魅力。但我真的很喜欢 Jason P 提供的 jQuery 解决方案。过渡卖给了我。我会去的。所以再次感谢大家。

于 2013-07-31T17:26:08.197 回答