1

画像のリストがあります-各行に3つ。

次に、そのすぐ下に 3 つの div があり、各画像に対応する情報があります

同じ設定で 3 行の画像があります。基本的に、すべてのアイテムをグリッドに表示したいと考えています。アイテム1、2、または3がクリックされた場合、関連情報を画像の最初の行のすぐ下に表示したいが、画像の2行目の前に、一度に1つの情報divしか開かないようにしたい.

<ul class="thumbnails">
                    <li class="span4">
                        <div class="thumbnail">
                            <img src="assets/img/rpic.jpg" alt="" class="accord-header">
                        </div>
                    </li>
                    <li class="span4">
                        <div class="thumbnail">
                            <img src="assets/img/mpic.jpg" alt="" class="accord-header">
                        </div>
                    </li>
                    <li class="span4">
                        <div class="thumbnail">
                            <img src="assets/img/cpic.jpg" alt="" class="accord-header">
                        </div>
                    </li>
                    </ul>
                    <div class="accord-content span12">
                        This is the content for the first image.
                    </div>
                    <div class="accord-content span12">
                        This is the content for the second image.
                    </div>
                    <div class="accord-content span12">
                        This is the content for the third image.
                    </div>

これにはアコーディオン スクリプトを使用していましたが、参照リンクのすぐ下に div を配置することしかできません。外部divを許可する方法はありますか

$(".thumbnails .accord-header").click(function() {
                if ($(this).next("div").is(":visible")) {
                    $(this).next("div").slideUp("slow");
                } else {
                    $(".thumbnails .accord-content").slideUp("slow");
                    $(this).next("div").slideToggle("slow");
                }
            });
4

1 に答える 1

1

を見つけるにはnext div、祖先を見つけて次のものを取得する必要があります..

交換

$(this).next("div")

と

$(this)..closest('li').next("li").find('div')

そして、あなたは無効HTML です..liの直接の子でなければなりませんul.Divを外側に移動しますul

accordcontentそもそもdivの中にdivを入れないのはなぜですか。それがより良いアプローチになるはずです。

アプローチ1

HTML

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/rpic.jpg" alt="" class="accord-header">
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/mpic.jpg" alt="" class="accord-header">
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/cpic.jpg" alt="" class="accord-header">
        </div>
    </li>
</ul>
<div class="content">
    <div class="accord-content span12">
        This is the content for the first image.
    </div>
    <div class="accord-content span12">
        This is the content for the second image.
    </div>
    <div class="accord-content span12">
        This is the content for the third image.
    </div>
</div>

JS

$(".thumbnails .accord-header").click(function () {
    var $closestli = $(this).closest('li'),
        liIndex = $('li').index($closestli);

    // Hide all content
    var $contentDiv = $('.accord-content.span12', '.content').eq(liIndex);
    if ($contentDiv.is(":visible")) {
        $contentDiv.slideUp("slow");
    } else {
        $('.accord-content.span12', '.content').not($contentDiv).slideUp("slow");
        $contentDiv.slideDown("slow");
    }
});

フィドルをチェック

アプローチ 2

それ以外の場合は、管理対象の対応するコンテンツ div を保持する HTML data-5* 属性を使用できます。

HTML

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/rpic.jpg" data-div="content1" alt="" class="accord-header">
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/mpic.jpg" data-div="content2" alt="" class="accord-header">
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="assets/img/cpic.jpg" data-div="content3" alt="" class="accord-header">
        </div>
    </li>
</ul>
<div class="content">
    <div id="content1" class="accord-content span12">
        This is the content for the first image.
    </div>
    <div id="content2" class="accord-content span12">
        This is the content for the second image.
    </div>
    <div id="content3" class="accord-content span12">
        This is the content for the third image.
    </div>
</div>

JS

$(".thumbnails .accord-header").click(function () {
    var contentId = $(this).data('div'),
        $contentDiv = $('#' + contentId);

    if ($contentDiv.is(":visible")) {
        $contentDiv.slideUp("slow");
    } else {
        $('.accord-content.span12', '.content').not($contentDiv).slideUp("slow");
        $contentDiv.slideDown("slow");
    }
});

フィドルをチェック

JS スライド切り替え

$(".thumbnails .accord-header").click(function () {
    var contentId = $(this).data('div'),
        $contentDiv = $('#' + contentId);

        $contentDiv.slideToggle("slow");
        $('.accord-content.span12', '.content').not($contentDiv).slideUp("slow");
});

スライドトグル

于 2013-07-21T00:54:23.657 に答える