1

我几乎查看了所有其他问题，但没有一个修复对我有用。我正在尝试制作一张个人资料图片，该图片将在其下方切换生物。在我将 (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;
}
4

1 回答 1

2

试试这个：

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

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

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

你也可以这样做：

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

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

于 2012-10-24T02:21:47.313 回答