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

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

jquery

Jquery 包含div之外的项目的手风琴风格行为,jquery,Jquery,我有一个图像列表-每行3个然后，我有3个div，在它的正下方，每个图像都有相应的信息我有3行相同设置的图像。基本上，我希望所有项目都显示在一个网格中。如果单击项目1、2或3，我希望在第一行图像的正下方，但在第二行图像之前显示它们的相关信息，并且一次只允许打开一个信息div <ul class="thumbnails"> <li class="span4"> <div clas

我有一个图像列表-每行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

，您需要找到祖先并获得下一个

替换

$(this).next("div")

与

您的

HTML

无效。。只有

li

应该是

ul

的直接子级。将div移到

ul

你为什么不把

content

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>

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

方法2

否则，您可以使用HTML data-5*属性来保存要管理的相应内容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>

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

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

要找到

下一个div

，您需要找到祖先并获得下一个

替换

$(this).next("div")

与

您的

HTML

无效。。只有

li

应该是

ul

的直接子级。将div移到

ul

你为什么不把

content

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>

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

方法2

否则，您可以使用HTML data-5*属性来保存要管理的相应内容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>

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

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

根据您的结构，您的脚本完全错误根据您的结构，您的脚本完全错误我已经尝试了这些修改。主要问题是我需要雅阁的内容来跨越整个页面。列表项仅占页面的33%。在原始问题中，我忘记了html中的结尾/ul，div在列表之外。然后你可以想出2种方法。。让我试试看，这是一个使用html5的优雅解决方案，可以很好地与我的php代码配合使用。谢谢你完成代码，我当时在路上的一个街区，很高兴能帮上忙：）还有一个问题，我本来是想使用.slideToggle函数的，那也行吗？还是我的头撞到了墙上？我已经尝试过这些修改。主要问题是我需要雅阁的内容来跨越整个页面。列表项仅占页面的33%。在原始问题中，我忘记了html中的结尾/ul，div在列表之外。然后你可以想出2种方法。。让我试试看，这是一个使用html5的优雅解决方案，可以很好地与我的php代码配合使用。谢谢你完成代码，我当时在路上的一个街区，很高兴能帮上忙：）还有一个问题，我本来是想使用.slideToggle函数的，那也行吗？还是我的头撞到了墙上？