Question

基本上我有一个简单的菜单，有8个选项。当选择一个项目时，我希望指针/箭头显示选择了哪一个（通过显示在选择旁边）。

我有简单的逻辑，可以计算箭头和子弹点（在数组中）的Y位置。我有一个简单的单击声明但是我不确定下一部分的方法。

我想说;如果点击了项目符号，则箭头位置y =所选项目符号点。在javascript中执行此操作的最佳方法是什么？我意识到这可能是一个简单的问题，但我正在学习！

$(".menuitem").click(function(){
    var $this = $(this);
    if($this.data('clicked')) {
      $(".menuitem").addClass("active");
      // active-arrow pos Y = menuitem pos Y.
      // $a = this.$snapPoints;
    } else {
      $(".menuitem").removeClass("active");
    }
});

这是我到目前为止的完整版本：https://codepen.io/anon/pen/qpLdyz?editors=1010

如果有人能帮助我了解实现这一目标的最佳方法，那么非常感谢！

约翰

Answer 1

你可以使用css。如果你想用箭头标记的元素是某种输入类型，那么你甚至可以使用：focus而不是完全使用js。

$('.menuitem').on('click', function(){
    
    $('.active').removeClass('active'); // remove old active
    $(this).addClass('active'); // add new active
    
});

.menuitem {
    position: relative;
    padding-left: 20px;
}

.active::before {
    content: '>';
    left: 0;
    top: 0;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menuitem">foo 1</div>
<div class="menuitem">bar 2</div>
<div class="menuitem">til 3</div>
<div class="menuitem">der 4</div>

动画：

$('.menuitem').on('click', function(){
    
    $('.arrow').css({'top':$(this).offset().top}); 
    
});

$('.menuitem').first().click();

.menuitem {
    position: relative;
    padding-left: 20px;
}

.arrow {
    left: 0;
    top: 0;
    position: absolute;
    transition: top 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="arrow">&gt;</div>

<div class="menuitem">foo 1</div>
<div class="menuitem">bar 2</div>
<div class="menuitem">til 3</div>
<div class="menuitem">der 4</div>

onClick将箭头移动到选定的项目符号点 - 最佳方法？

1 个答案: