2

多くの <li> 項目を持つ <ul> があります。<li> はタイル形式で表示され (現在の CSS では、3 つの項目が 1 行に収まります)、各 <li> は簡単なイントロを表示し、onclick ですべての情報を表示するために (幅 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;}

Jクエリ

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

選択されたセルを取り、それを含む行のすぐ上の行にポップして全幅にするものがあります。それはあなたが探しているものに近いですか？その場合、これに対応するために HTML を変更するとともに、CSS と JS を組み合わせる必要があります。これを何度も繰り返してきた (そして、クライアント/顧客の期待に応えるためにやり直さなければならない) これは、私がよく行うことです。ここでこのフィドルでそれを見て ください

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

Jクエリ

$(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 に答える