如何控制divs jQuery slideToggle推送的内容

Question

我是编写jQuery的新手，并且有一个与slideToggle函数相关的问题。我正在与团队成员一起开发一个页面。当您点击他们的照片时，我希望下面的照片向下滑动并显示内容。我在桌面视图中有4行，每行有3张照片。对于移动视图，有5行，每行有2张照片。为了让内容显示在正确的照片下，我将内容直接放在我的HTML中的相关照片下。然后我使用slideToggle功能在单击照片时向下滑动内容。由于内容位于行中其余照片之前，因此它会向下推动所有内容，包括应该单击照片旁边的照片。有没有办法让行尾的照片保持在他们的位置？

这是我的一行HTML：

        <div class="portfoliowork">
            <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc4">
        </div>
        <div class="toggledesc toggledesc4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="portfoliowork">
            <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5">
        </div>
        <div class="toggledesc toggledesc5">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="portfoliowork">
            <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc6">
        </div>
        <div class="toggledesc toggledesc6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

这是与JQuery相关的CSS：

.toggledesc{
    padding:1%;
    float: left;
    display: block;
}

.portfoliowork{
    width:33%;
    float: left;
    display: block;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:1%;
 }


@media screen and (max-width: 500px) {
  .portfoliowork{
     width:50%;
   }
}

这是jQuery：

<script>
$('img[data-char=togglephoto1]')
    $(function(){
        $('.toggledesc').hide();

        $('.togglephoto').on('click', function(){
            var toggleid = $(this).attr('data-toggleid');

            $('.' +toggleid).slideToggle("slow");
        });

    });
</script>

任何建议将不胜感激！谢谢！

Answer 1

也许你说你希望描述一次出现一个，在这种情况下我只会添加一行：

$('img[data-char=togglephoto1]')
    $(function(){
        $('.toggledesc').hide();

        $('.togglephoto').on('click', function(){
            var toggleid = $(this).attr('data-toggleid');
            $('.toggledesc').not('.' +toggleid).slideUp("slow");  // new line
            $('.togglephoto').not('.' +toggleid).css('border','')
            $('.' +toggleid).slideToggle("slow");
            $(this).css('border','solid black 1px');
        });

    });

.toggledesc{
    padding:1%;
    float: left;
    display: block;
}

img {
  height: 100px;
  width: 100px;
  }

.portfoliowork {
  display: inline-block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfoliowork">
            <img src="http://infinitelives.net/avatars/mangajen.jpg" class="togglephoto" data-toggleid="toggledesc4">
        </div>
        <div class="portfoliowork">
            <img src="http://www.zdar.net/wp/wp-content/uploads/2010/04/avatar-face-your-manga.jpg" class="togglephoto" data-toggleid="toggledesc5">
        </div>
        <div class="portfoliowork">
            <img src="http://zarkseven.files.wordpress.com/2008/08/avatar.jpg" class="togglephoto" data-toggleid="toggledesc6">
        </div>
        <div class="toggledesc toggledesc4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="toggledesc toggledesc5">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="toggledesc toggledesc6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

Answer 2

如果您需要将所有三个图像保持在一起，将它们全部放在一个DIV中，那么您可以隐藏它们下面的所有三个描述DIV。单击图像时，隐藏首先不对应的描述（如果显示任何对象），然后显示您要查看的描述（如果没有显示，只显示与您单击的图像对应的那个）。这是jQuery：

$('.togglephoto').on('click', function(){
    var toggleid = $(this).attr('data-toggleid');
    if($('.toggledesc:visible').size() > 0){
        $('.toggledesc:visible').not('.' + toggleid).slideUp(function(){
            $('.' +toggleid).slideToggle("slow");
        });
    }
    else{
        $('.' +toggleid).slideToggle("slow");
    }
});

而CSS：

.toggledesc{
    display:none;
}

您可以查看小提琴（http://jsfiddle.net/14thum65/）以查看HTML - 它有点长。

编辑：要添加第二列，对于您的移动版本，您可以将上述答案中的HTML放在一个DIV中（我们将给它一个容器类），将其宽度设置为50％（或任何您想要的） ，并将其设置为向左浮动。然后你可以基本上复制并粘贴整个DIV，更改其中的描述的类号及其相应的“togglers”，并将第二个.container设置为向右浮动。它处理HTML，现在只需更新JS，只查看与你点击的“toggler”相同的.container中的.toggledesc元素，使用：

$(this).closest('.container').find('.toggledesc:visible') ...

而不只是切换所有可见的描述。

这可能不是说出这一切的最佳方式，但这里是一个小提琴，所以你可以看到我的意思：http://jsfiddle.net/5a8q0smm/