将 li 项移动到列表顶部

Question

我有一个可折叠的材质 ui，我想确保无论何时单击一个项目，它都应该保持在顶部。

例如，默认值为 First、Second、Third。当用户点击展开第二个时，它应该被移动到顶部并展开第二个，就像列表一样

第一个（展开）

第二

第三

---

第二（扩展）

第一

第三

---

如果第三个被点击，那么列表应该显示为

第三（扩展）

第一

第二

---

  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Answer 1

我想使用index() 函数，但似乎每次我们使用prepend() li 元素时索引都会发生变化。所以我想为每个li 修复这个索引，这样做我会自动影响它们并id 属性。

$("li").each(function(index){
  $(this).prop("id",index);
});

之后，我们唯一要做的就是根据点击的li 预先添加li 元素，并使用我们添加到它们的id。例如，如果我们点击第二个li，我们将得到以下内容。

 if($(this).prop("id")==1){//If it's the second one
   $("ul").prepend($("#2"));
   $("ul").prepend($("#0"));
   $("ul").prepend($("#1"));
  }

最后，这里有一段代码 sn-p 展示了我的所有理论：

$("li").each(function(index){
  $(this).prop("id",index);
});

$("li").on("click",function(){
$(".collapsible-body").hide();
$(this).find(".collapsible-body").show("slow");
 if( $(this).prop("id") == 0 ){//If it's the first one
    $("ul").prepend($("#2"));
    $("ul").prepend($("#1"));
    $("ul").prepend($("#0"));
  }else if($(this).prop("id")==1){//If it's the second one
   $("ul").prepend($("#2"));
   $("ul").prepend($("#0"));
   $("ul").prepend($("#1"));
  }else{//If it's the third one

   $("ul").prepend($("#1"));
   $("ul").prepend($("#0"));
   $("ul").prepend($("#2"));
  }
  
});

.collapsible-body{
display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

---

优化

或者你可以使用这个：

$("li").each(function(index){
  $(this).prop("id",index);
});

$("li").on("click",function(){
$(".collapsible-body").hide();
$(this).find(".collapsible-body").show("slow");

for(var i=0;i<$("li").length;i++){
var id="#"+i;
$("ul").append($(id));
}
$("ul").prepend($(this));
});

.collapsible-body{
display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>