[英]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.