1

フィドル。このフィドルには、2つのドロップダウンメニューがあります。1つ目は「Categorieën」、2つ目は「Contact」です。リストアイテムに割り当てられるクラスは、ホバーの矢印が左を指すか右を指すか（スペースが最も残っているスペース）を決定します。次のコードはそれを処理する必要があります。ただし、フィドルでわかるように、[連絡先]ドロップダウンのリスト項目は間違った方向を指しているため、左を指している必要があります。

$("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";
  }
});

どこで私は間違えましたか？

4

2 に答える 2

0

解決策：

// 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"
});
于 2013-01-12T19:50:07.053 に答える
0

メニュー行が表示されないため、$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
于 2013-01-12T17:52:49.933 に答える