Jquery 滑动切换（）效果变差

我对网页设计真的很陌生，一直在尝试复制我在代码学校的一门课程中看到的这种slideToggle（）效果。所以底线是当你按下一个按钮时，照片就会出现，然后当你把鼠标移到照片上时，文本就会出现，上面有照片的描述。我认为问题在于css，因为它没有包含在代码学校的jQuery课程中。所以，如果有人能帮我，因为我玩得越多，我就越喜欢它，我相信这可能是一个简单的问题，但我已经学习了2周，其中一周的时间都花在了这上面（断断续续），所以我必须寻求帮助！！这里是指向所有包含文件的链接 嗯，看来我得把代码写在这里

CSS:

jQuery：

function showPhotos(){
    $(this).find('span').slideToggle();
}

$(document).ready(function(){
    //EVENT HANDLER FOR CLICK EFFECT

    $('#teams').on('click','button',function(){
    $('.photos').slideToggle();
  });

    $('.photos').on('mouseenter','li',showPhotos);
    $('.photos').on('mouseleave','li',showPhotos);

HTML:

我最喜欢的运动队
我喜欢所有的运动，但曲棍球和足球是我的最爱

请参阅团队徽标


温哥华加努克（NHL）

卑诗省狮子会（CFL）


温哥华白浪（MLS）


多伦多蓝鸟（MLB）


西雅图海鹰队（NFL）

---

谢谢，Dennis，你的例子不起作用，但根据你上面的代码，这里是我的答案

---

如果您不想在向

li

添加文本时（或者更具体地说，在切换

span

时）它们四处移动，请尝试使用

display:inline block

并设置宽度和高度。通过这种方式，

li

s不会改变大小，因此在添加内容时不会移动。

忘了提一下问题：当我将鼠标移到照片上时，它们在显示文本时都会移动，我不是专业人士，但可能与定位有关？再次感谢您的帮助，如果您的按钮不起作用-没有id，或者jQuery连接到它。为什么要在onclick中使用“teams”div而不是按钮？你忘了在小提琴中加入jQuery作为初学者：）-我认为在课程中使用#teams div的原因是为了使按钮成为一个更具体的路径？我想在课程的下一部分他们会添加更多的按钮。。。

function showPhotos(){
    $(this).find('span').slideToggle();
}

$(document).ready(function(){
    //EVENT HANDLER FOR CLICK EFFECT

    $('#teams').on('click','button',function(){
    $('.photos').slideToggle();
  });

    $('.photos').on('mouseenter','li',showPhotos);
    $('.photos').on('mouseleave','li',showPhotos);

<div id="teams">
   <h2>My Favourite Sports Teams</h2>
   <p>I love all sports but<em> hockey</em> and <em> football </em>are my favourites</p>
   <button>See team logo's </button>
   <ul class="photos">
     <li>
       <img  src="Sports_site/Images/Canucks/canucks_logo1.gif"><span>Vancouver Canucks (NHL)</span> </li>
     <li>
       <img   src="Sports_site/Images/BCLions/bcLions_logo1.JPG">
       <span> BC Lions (CFL) </span>
     </li>
     <li>
       <img  src="Sports_site/Images/Whitecaps/caps_logo3.jpg">
       <span> Vancouver Whitecaps (MLS) </span>
     </li>
     <li>
       <img src="Sports_site/Images/BlueJays/blue_jays_logo1.gif">
       <span> Toronto BlueJays (MLB) </span>
     </li>
     <li>
       <img src="Sports_site/Images/Seahawks/Glow_seahawks_logo.jpg">
       <span> Seattle Seahawks (NFL) </span>
     </li>
   </ul>