사용자가 jQuery에서 웹 사이트를 개정 할 때 아코디언 요소의 너비를 변경하십시오.

Question

%에서 요소 아코디언의 너비 - 244px (아코디언의 오른쪽에있는 요소의 전체 크기)로 너비를 변경하고 싶습니다.

var accordwidth = $("accordion").width() -244; 
$this.stop().animate({'width':accordwidth },500); 

을하지만 그것은 작동하지 않습니다

$(function() { 
     $('.accordion > li').hoverIntent(
       function() { 
        var $this = $(this); 

       >>> $this.stop().animate({'width':'80%'},500); <<< 

        $('.heading',$this).stop(true,true).fadeOut(); 
        $('.bgDescription',$this).stop(true,true).slideDown(500); 
        $('.description',$this).stop(true,true).fadeIn(); 
       }, 
       function() { 
        var $this = $(this); 
        $this.stop().animate({'width':'5em'},1000); 
        $('.heading',$this).stop(true,true).fadeIn(); 
        $('.description',$this).stop(true,true).fadeOut(500); 
        $('.bgDescription',$this).stop(true,true).slideUp(700); 
       } 
     ); 
    }); 

나는 생각했다.

Answer 1

<script type="text/javascript"> 
    $(function() { 
     $('.accordion > li').hoverIntent(
       function() { 
        var $this = $(this); 
        var wide1 = $('body').width(); 
        var wide2 = $('li.bg1').width()*3; 
        var wide3 = wide1 - wide2 - 4; 
        $this.stop().animate({'width':wide3},500); 
        $('.heading',$this).stop(true,true).hide(); 
         $('.bgDescription',$this).stop(true,true).slideDown(500); 
        $('.description',$this).stop(true,true).fadeIn(); 
       }, 
       function() { 
        var $this = $(this); 
        $this.stop().animate({'width':'5em'},500); 
        $('.heading',$this).stop(true,true).fadeIn(); 
        $('.description',$this).stop(true,true).fadeOut(500); 
        $('.bgDescription',$this).stop(true,true).slideUp(700); 
       } 
     ); 
    }); 
</script> 

나는 더 나은 구문 일 수 있다고 확신하지만 제대로 작동합니다. wide1은 아코디언의 부모이고, wide2는 아코디언의 세 요소 (4 개 요소)가 차지하는 공간이며, wide3은 본문에서 차감 한 후 사용 가능한 공간이며 다른 요소는 3 개의 요소 + 국경이 차지하는 경계입니다. 이 요소들. 자바 스크립트 &에 대해 잘 모르는 사람을 위해이 특정 문제를 해결하는 방법을 찾기 위해이 솔루션을 사용했습니다.