簡體   English   中英

將li項目移到列表頂部

[英]Moving the li item to the top of the list

我有一個可折疊的材料ui,我想確保在單擊該項目時,它應該位於頂部。

例如,默認值為第一,第二,第三。 當用戶單擊以展開第二個時,應將其移至頂部並以第二個展開,因為列表如下所示

第一(擴展)

第二

第三


第二(擴展)

第一

第三


如果單擊第三個,則列表應顯示為

第三(擴展)

第一

第二


  <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>

我想使用index()函數,但是似乎每次我們使用prepend() li元素時索引都會改變。 因此,我考慮過為每個li固定此索引,以自動執行對我影響的id屬性。

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

之后,我們唯一要做的就是根據所單擊的li並使用我們添加到它們中的id來添加li元素。 例如,如果我們單擊第二個li我們將顯示以下內容。

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

最后,這是一個代碼片段,展示了我的全部理論:

 $("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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM