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"));
  }

最后，这是一个代码片段，展示了我的所有理论：

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

将li项目移动到列表顶部

1 个答案: