Question

我编写了此页面，我想用滚轮鼠标在li菜单中导航。我的问题是：我希望所选班级的li位于左侧的第一位置。

如何使用jquery代码使用在此位置选择的类制作特定的li？

$(document).ready(function() {
  var scrolling_size = 0;
  $("li").each(function(index) {
    scrolling_size += parseInt($(this).css("width"));
  });
  $("#menu").css("width", scrolling_size);
  scrolling_size = scrolling_size - parseInt($('#container').css("width"));

  $('#menu').bind('mousewheel', function(e) {
    $("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
    if (e.originalEvent.wheelDelta > 0) {
      if (parseInt($(this).css("left")) <= -50) {
        $(this).css("left", "+=50");
      }
    } else {
      if (parseInt($(this).css("left")) >= -scrolling_size) {
        $(this).css("left", "-=50");
      }
    }
  });
});

#l,
#r {
  float: left;
  font-size: 80px;
}

#container {
  float: left;
  border: 1px solid green;
  width: 500px;
  padding: 2px;
  overflow: hidden;
  position: relative;
}

#menu {
  border: 1px solid blue;
  padding: 2px;
  position: relative;
}

ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid red;
  display: inline-block;
  font-size: 80px;
}

.selected {
  background: #0095ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="menu">
    <ul>
      <li>Hi !</li>
      <li>Text here</li>
      <li>Something like this</li>
      <li class="selected">Always</li>
      <li>Thanks !</li>
      <li>Bye</li>
    </ul>
  </div>
</div>

赞： image

我尝试过这个：

$("#menu").css("left", $(".selected").css("left"));

但这是行不通的请帮助我

Answer 1

在$("#menu ul li.selected").prependTo("#menu ul");

中尝试一下

$(document).ready(function() {

$("#menu ul li.selected").prependTo("#menu ul");

  var scrolling_size = 0;
  $("li").each(function(index) {
    scrolling_size += parseInt($(this).css("width"));
  });
  $("#menu").css("width", scrolling_size);
  scrolling_size = scrolling_size - parseInt($('#container').css("width"));

  $('#menu').bind('mousewheel', function(e) {
    $("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
    if (e.originalEvent.wheelDelta > 0) {
      if (parseInt($(this).css("left")) <= -50) {
        $(this).css("left", "+=50");
      }
    } else {
      if (parseInt($(this).css("left")) >= -scrolling_size) {
        $(this).css("left", "-=50");
      }
    }
  });
});

#l,
#r {
  float: left;
  font-size: 80px;
}

#container {
  float: left;
  border: 1px solid green;
  width: 500px;
  padding: 2px;
  overflow: hidden;
  position: relative;
}

#menu {
  border: 1px solid blue;
  padding: 2px;
  position: relative;
}

ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid red;
  display: inline-block;
  font-size: 80px;
}

.selected {
  background: #0095ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="menu">
    <ul>
      <li>Hi !</li>
      <li>Text here</li>
      <li>Something like this</li>
      <li class="selected">Always</li>
      <li>Thanks !</li>
      <li>Bye</li>
    </ul>
  </div>
</div>

Answer 2

我找到了答案我们必须添加：

var  pos = $("li.selected").position();
$("#menu").css("left", pos);

准备好特定班级的李

2 个答案: