Question

我是网页设计的新手，并且一直试图复制我在代码学校学习的课程中看到的slideToggle（）效果。所以底线是当你按下按钮时，照片出现，然后当你将鼠标放在照片上时，会出现带有照片描述的文字。我认为问题在于CSS，因为它没有包含在代码学校的jQuery课程中。因此，如果有人可以帮我这个，因为我玩的越多，我就会越努力，我相信这可能是一个容易出问题的问题，但我已经学习了2个星期，并且花了一周时间用于此（开和关）所以我得请求帮助!!以下是所有包含文件http://jsfiddle.net/HtRNk/1/的链接嗯看起来我必须在这里包含代码

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 s不会改变大小，因此在添加内容时不会移动。

slideToggle（）效果变差了

1 个答案: