javascript - .slidetoggle jQuery中的单独div

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

<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:[email protected]">[email protected]</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;
}

最佳答案

尝试这个：

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

.next()方法不会扫描以下元素，直到找到与提供的选择器匹配的元素为止，它始终选择紧随其后的元素，还是不选择任何元素，具体取决于该元素是否与提供的选择器匹配。

但是，您的h4.toggle元素的父级紧随其后的是.bio元素，因此$(this).parent().next('.bio')应该可以工作。

您也可以这样做：

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

也就是说，向上遍历到包含的.profile div元素，然后在该元素内找到一个.bio进行切换。这更加健壮，因为如果以后在.bio元素之前插入其他元素来更改结构，则不会损坏它。

关于javascript - .slidetoggle jQuery中的单独div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13042086/

BIO

javascript - .slidetoggle jQuery中的单独div