Question

我有一个图像列表 - 每行3个。

然后我直接在下面有3个div，每个图像都有相应的信息

我有3行图像，设置相同。基本上我想让所有项目都显示在网格中。如果单击项目1,2或3，我想在第一行图像的正下方显示相关信息，但在第二行图像之前，以及只允许一次打开一个信息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");
                }
            });

Answer 1

找到你需要找到的next div找到祖先并获得下一个......

替换

$(this).next("div")

带

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

你的帖子无效HTML ..只有li应该是ul的直接子项。将div移到ul

之外

为什么你不首先在div中有accordcontent 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");
    }
});

<强> Check Fiddle

方法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");
    }
});

<强> Check Fiddle

JS slideToggle

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

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

<强> Slide Toggle

包含div之外的项目的手风琴风格行为

1 个答案: