addClass 함수의 If 문이 잘못된 값을 반환합니다.

Question

Fiddle. 이 피들에는 두 개의 드롭 다운 메뉴가 있습니다. 첫 번째는 "카테고리", 두 번째는 "연락처"입니다. 목록 항목에 할당 된 클래스는 호버상의 화살표가 왼쪽 또는 오른쪽 (가장 공간이 남은 공간)을 가리키는 지 여부를 결정합니다. 다음 코드는이를 처리해야합니다. 그러나 바이올린에서 볼 수 있듯이 연락처의 목록 항목이 잘못된 방향을 가리키면 왼쪽을 가리켜 야합니다.

$("ul.sub-menu > li:not(':last-child')").addClass(function() { 
    var $this = $(this), 
    offL = $this.offset().left, 
    wW = $(window).width(); 

    if (offL > ((wW/2) - $this.width())) { 
    return "over-left"; 
    } else { 
    return "over-right"; 
    } 
}); 

어디서 잘못 되었나요?

Answer 1

솔루션 :

// We need to briefly show the sub-menu to get its offset and width 
$("ul.sub-menu").css({ 
    visibility: "hidden", 
    display: 'block'}); 

    $("ul.sub-menu > li:not(':last-child')").each(function() { 
    var $this = $(this); 
    $this.addClass(function() { 
     var offL = $this.offset().left, 
     wW = $(window).width(); 
     if (offL > ((wW/2) - $this.width())) { 
     return "over-left"; 
     } else { 
     return "over-right"; 
     } 
    }); 
    }); 

$("ul.sub-menu").css({ 
    visibility: "visible", 
    display: "none" 
}); 

Answer 2

메뉴 줄이 표시되지 않으므로 $this.width()은 항상 0과 같으며 조건이 충족되지 않습니다.

클래스 속성 루프 앞에 show()을 추가하여 함수에 사용 된 올바른 메뉴 너비 값을 검색했습니다.

http://jsfiddle.net/tKL8E/33/

// RELEVANT CDOE 
$("ul.sub-menu > li:not(':last-child')").show().addClass(function() { 
    var $this = $(this), 
    offL = $this.offset().left, 
    wW = $(window).width(); 
    console.log(offL + ' ' + (wW/2) + ' ' + $this.width()) 

    if (offL >= ((wW/2) - $this.width() - 238.5)) { 
    return "over-left"; 
    } else { 
    return "over-right"; 
    } 
}); 
// /END RELEVANT CODE