css - Jquery - 切换当前列表项(100％宽度)并将左侧和右侧的元素(如果有)向下推

Question

我有一个包含许多

项的

。
• 以平铺格式显示(使用当前 CSS，一行可容纳 3 个元素)，每个
• 显示一个简短的介绍，并将展开(至 100% 宽度)以通过 onclick 显示所有信息。 我想要但不知道如何展开一个元素时，它占据页面的整个宽度并将左侧和右侧的元素向下推送。使用到目前为止我的代码(如下)，元素 1, 4, 7...(第一行)工作正常，但不是 2, 3, 5, 6。 jquery 或 CSS 有没有办法做到这一点这？或者另一种看待它的方式:有没有办法让当前元素成为该行的第一个元素？谢谢!

  <ul class="resutls">
  <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li> ...
  </ul>
  

  CSS

  .results li {width:200px; height:140px; margin:7px 14px 7px 0; float:left;}
  .results li.current{width:660px; height:auto;}
  

  Jquery

   $('li').toggle(function() {  
     $(this).addClass("current");
     $($(this).find('.js-toggleContent')).toggle("slow");
   }, function() {  
     $(this).removeClass("current");
     $($(this).find('.js-toggleContent')).toggle("slow");   
   });         
  

Answer 1

我有一些东西可以获取选定的单元格并将其弹出到包含该单元格的行正上方的行中，使其成为全 Angular 。这与您要寻找的接近吗？如果是这样，您将需要混合使用 CSS 和 JS，并修改 HTML 以适应这种情况。这件事已经做过很多次了(并且必须重做以满足客户/顾客的期望)，这就是我经常做的事情。看看这个 fiddle here

HTML

<ul class="results">
    <div class="detail hide"></div>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul class="results">
    <div class="detail hide"></div>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul class="results">
    <div class="detail hide"></div>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

.results{
    background-color: yellow;
    margin: 0;
    padding: 0;
    position:relative;
    height:auto;
    overflow: visible;
    width:652px;
    display:block;
    list-style: none;
}
.results li {
    background-color:red;
    padding: 0;
    width:200px;
    height:140px;
    display:inline-block;
    margin:7px;
    list-style-type: none;
    cursor:pointer;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
.detail{
    background-color:orange;
    padding: 7px;
    width:624px;
    position:relative;
    top:7;
    visibility:visible;
    left:auto;
    opacity: 1;
    margin:0 7px 7px 7px;
    cursor:pointer;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.hide{
    visibility:hidden;
    opacity: 0;
    position:absolute;
}
.fade{
    opacity: .2;
}

Jquery

$(document).ready(function () {
    'use strict';
    var $getDetails = $('.results div'),
          $getLis = $('.results li');
    $('.results').on('click', 'li', function() {
        $getLis.removeClass('fade');
        $getDetails.addClass('hide').empty();
        $(this).siblings('div')
            .html($(this).html())
            .addClass('hide')
            .removeClass('hide');
        $(this).addClass('fade');
    });
    $('.results').on('click', '.detail', function() {
        $getDetails.addClass('hide').empty();
        $getLis.removeClass('fade');
    });
});