Question

我有一个＆lt; ul＆gt;与许多＆lt; li＆gt;项目。＆lt; li＆gt;以平铺格式显示（使用当前CSS，3个项目适合一行）并且每个＆lt; li＆gt;显示简短的介绍并将展开（至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

我有一些东西可以选择一个单元格并将其弹出到包含它的行的正上方，使其成为全宽。那是否接近你想要的？如果是这样，您将需要混合使用CSS和JS以及修改HTML以适应这种情况。做了很多次这件事（并且必须重做它以满足客户/客户的期望）这是我经常做的事情。在这个小提琴中查看它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');
    });
});

Jquery - 切换当前列表项（100％宽度）并向左和向右推送项目（如果有）向下

1 个答案: