2

我有一个 <ul> 有很多 <li> 项目。<li> 以平铺格式显示（使用当前的 CSS，3 个项目放在一行中），每个 <li> 显示一个简短的介绍，并将扩展（到 100% 宽度）以显示所有信息，点击。我想要但不知道如何扩展项目时，它会占用页面的整个宽度并将项目左右向下推。使用我到目前为止的代码（如下），项目 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");   
 });
4

1 回答 1

0

我有一些东西可以将一个被选中的单元格弹出到包含它的行的正上方的一行，使其成为全角。这和你要找的很接近吗？如果是这样，您将需要混合使用 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');
    });
});
于 2013-01-18T22:13:35.710 回答