javascript - .slidetoggle 在 jquery 中单独的 div

Question

我实际上已经查看了所有其他问题，但没有一个修复对我有用。我正在尝试制作一张个人资料照片，以切换其下方的生物。在我将 (this).next 添加到我的 slideToggle 事件之前，它会滑动，但它会滑动类 .bio 的所有实例。添加 (this).next 会破坏代码。我在我的文件夹中将最新的 jquery.js 保存为 jquery-1.8.2.js。这可能是一个CSS问题吗？任何见解都会很有帮助。谢谢。

<script>

             $(document).ready(function() {
             $('.bio').hide();

             $('.toggle').click(function() {
             $(this).next('.bio').slideToggle();
             });
             });
</script>


<div class="profile">
            <div class="profilepic">
            <a class='toggle' href="#"><img src="images/charles.jpg" width="100" height="100" alt="charles"/></a>
            </div><!-- end of profilepic class -->
            <div class="officerinfo">
            <h4 class='toggle'>Dude McDudeson</h4>
            <br>
            <a href="mailto:duuuude@gmail.com">duuuude@gmail.com</a> 
            <h5><a href="positions.html">President</a>
            <br>
            <br>
            </div><!-- end of officerinfo class -->
            <div class="bio" style="display:none">
            <p>description</p>
            </div><!-- end of bio class -->
            </div><!-- end of profile class -->

CSS

/* Profile */
.profile
{
position: relative;
padding-top:20px;
width: 550px;
height: 150px;
}

/* ProfilePic */
.profilepic
{
float: left;
width: 100px;
height: 100px;
}

/* Officer Info */
.officerinfo
{
width:420px;
float: right;
}

/* Bio */
.bio
{
width: 420px;
float: right;
}

Answer 1

试试这个:

$(this).parent().next('.bio').slideToggle();

.next() 方法在找到与提供的选择器匹配的元素之前不会扫描以下元素，它总是选择紧随其后的元素或不选择任何元素，具体取决于该元素是否匹配提供的选择器。

但是，您的 h4.toggle 元素的父元素紧跟在 .bio 元素之后，因此 $(this).parent().next(' .bio') 应该可以。

你也可以这样做:

$(this).closest('div.profile').find('.bio').slideToggle();

即，向上遍历包含 .profile 的 div 元素，然后在该元素中找到要切换的 .bio。这更健壮，因为如果稍后在 .bio 元素之前插入其他元素更改结构，它不会被破坏。