Javascript .slidetoggle在jquery中切换单独的div

我几乎查阅了所有其他问题，但没有一个修复方法对我有效。我试图有一个个人资料图片，将切换到它下面的生物。在我添加slideToggle事件旁边的（this）。添加（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 -->

试试这个：

<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 -->

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

.next（）

方法在找到与提供的选择器匹配的元素之前不会扫描以下元素，它始终选择紧跟其后的元素或不选择任何元素，这取决于该元素是否与提供的选择器匹配

<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 -->

但是，您的

h4.toggle

元素的父元素后面紧跟着

.bio

元素，因此

$（this）.parent（）。下一步（'.bio'）

应该可以工作

<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 -->

您也可以这样做：

<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 -->

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

---

也就是说，向上遍历包含

.profile

div元素，然后在该元素中找到一个

.bio

进行切换。这更健壮，因为如果以后在

.bio

元素之前插入其他元素来更改结构，它就不会被破坏。

好，第二个元素起作用了！非常感谢你。现在我已经明白了，当bio扩展时，它应该向下推其他配置文件类（例如副总裁）。但当我扩展bio时，它只会向下推OfficeInfo和bio类。因此，更高的生物推到个人资料图片。我已经包括了相关的css。再次感谢您的回答，尽管这太棒了。OP有一个

和一个

，确保他想要哪一个。h4是警官的名字，我想要警官的名字和个人资料图片来切换bio。我应该换一种方式吗？我没有注意到（直到Sheikh提到）您有多个

切换
元素。如果您希望两者都切换bio，那么我显示的第二个方法可以正常工作，但是
.next（）
方法由于我给出的原因无法正常工作。（您可能会发现需要向单击处理程序添加
event.preventDefault（）
或
return false；
，以停止默认的锚元素行为。）关于您的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 -->