Question

我已经查询了几乎所有其他问题，但没有任何修复对我有用。我正在尝试使用个人资料照片来切换它下面的生物。在我将（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: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元素之前插入其他元素来更改结构，它将不会被破坏。

.slidetoggle在jquery中分隔div

1 个答案: