slideToggle( )效应恶化

Question

我对web设计非常陌生，并且一直在尝试复制我在代码学院上的一门课程中看到的slideToggle ()效果。因此，底线是当你按下一个按钮，照片出现，然后当你鼠标对照片，文字显示与照片的描述。我认为问题在于css，因为它没有包含在代码学校的jQuery课程中。因此，如果有人可以帮助我，因为我玩的越多，我就越能解决它，而且我肯定这可能是一个容易的问题，但我已经学习了两个星期了，其中一个星期是花在这个(断断续续)上的，所以我不得不寻求帮助！下面是指向所有包含的文件的链接，http://jsfiddle.net/HtRNk/1/ hmm看起来就必须包括这里的代码

CSS：

ul{
    list-style-type:none;
}
ul li {
    display: inline;
}

.photos{

    display:none;
}
span{
    font-size:10px;
    color:#CCCCCC;
    position:relative;
    right:150px;
    bottom:3px;
    display: none;
}

img{
    width:150px;
    height:137px;
}

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：

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

​

谢谢，丹尼斯

Answer 1

您的示例不起作用，但基于上面的代码，这里是我的答案。

如果您不希望li在向它们添加文本时移动(或者更具体地说，当span被切换时)，尝试使用display: inline-block并设置一个宽度和高度。这样，li就不会改变大小，因此在添加内容时不会移动。