代码之家 › 专栏 › 技术社区 › Akash

导航栏中选择菜单的位置

jquery javascript

Akash · 技术社区 · 5 年前

我有一个菜单栏的定位要求,所有的菜单项都按照它们的位置放置。

比如:“所有野生动物”都会有第一个选择。现在,在选择任何菜单项时,该项将放在第一个位置,第一个选项将是第二个,其中第一个项目“所有野生动物”将始终位于第二个。

HTML格式:

`<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='subpage_top_nav'>
  <ul>
    <li>
      <a href='#'>
        <center>All WildLife</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Kavango</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Northeast Greenland</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Pacific Remote</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>PapahÄnaumokuÄkea </center>
      </a>
    </li>
  </ul>
</div>`

JS公司:

  $('.subpage_top_nav li').click(function(e) {
  e.preventDefault();
  $(this).parent().prepend(this);
});

案例: 页面呈现菜单如下: 一。所有野生动物 2。卡万戈 5个。木瓜

案例1:如果单击“Pacific Remote”->“Pacific Remote”转到第一个位置,“All WildLife”转到第二个位置。

0 回复 | 直到 5 年前

rule 5 年前

我不确定是否允许您更改html,所以我只使用js,如果可以的话,将索引添加到html中,您可以将js减少一半

这是用“长”的方式做的,所以我希望你能理解步骤

    $('.subpage_top_nav li').click(function(e) {
        e.preventDefault();

        /* find the element that needs to be moved */
        var $toBeMoved = $('.need-to-go-back')

        /* check if any1 actually needs to be moved */
        if($toBeMoved) { 

           /* grab his init position */
          var initPosition = $toBeMoved.attr('initial-position') 

          /* move the element there */
          $('.subpage_top_nav li:eq(' + initPosition + ')').after($toBeMoved)

          /* remove the signaling class */
          $toBeMoved.removeClass('need-to-go-back')

          /* remove the attr */
          $toBeMoved.removeAttr('initial-position') 
       }

       /* grab index */
       var index = $(this).index()

       /* save original index to know where it should be placed */
       $(this).attr('initial-position', index)

       /* add signaling class just to be easier to find it later */
       $(this).addClass('need-to-go-back')
       $(this).parent().prepend(this);
     });

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前