jquery - 如何控制jQuery slideToggle下推的div

Question

我是 jQuery 的新手，有一个与 slideToggle 函数相关的问题。我正在与团队成员一起开发一个页面。当您单击他们的照片时，我希望下面的照片向下滑动并显示内容。在桌面 View 中，我有 4 行，每行三张照片。对于移动 View ，有 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>