1

我有一个图像列表 - 每行 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");
                }
            });
4

1 回答 1

1

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

代替

$(this).next("div")

和

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

而且你有无效的HTML ..只li应该是一个ul.Move div的直接孩子到外面ul

你为什么不把accordcontentdiv 放在 div 里面呢。那应该是更好的方法。

方法一

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

检查小提琴

方法二

否则，您可以使用包含要管理的相应内容 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 回答