Question

我有以下标记（我在Code Pen中创建了example）：

<div class="slider">
  <ul>
    <li id="S1">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x180" /></div>      
    </li>
    <li id="S2">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x280" /></div>
    </li>
  </ul>
  <a href="#S1">1</a>
  <a href="#S2">2</a>
</div>

我想要以下内容：

最初只有第一个LI项目可见。
单击A标签时，如果其href值不是可见LI的ID，则：
- 淡出当前的LI;
- 调整Slider容器的大小DIV高度为要显示的LI的高度。
- 淡入LI会显示。

如何使用JQuery执行此操作？

谢谢你，米格尔

Answer 1

我相信这个交换功能应该可以解决这个问题

首先将currentStory类添加到第一个LI和A标记<li id="S1" class="currentStory"> <a href="#S1" class="currentStory" id="S1">1</a>

确保链接与其<li>项目具有相同的ID才能使其生效

<a href="#S1" class="currentStory" id="S1">1</a> <a href="#S2" id="S2">2</a>

$(document).ready(function() {

  function swapStory(storyName){
$('.slider li.currentStory').hide();
$('.slider li.currentStory').removeClass('currentStory');
$('.slider [id = ' + storyName + ']').addClass('currentStory');
$('.slider [id = ' + storyName + ']').fadeIn("slow");
  }

  $(function() {

     $('.slider li:not(".currentStory")').hide();
        $('.slider a').click(function(){
            swapStory($(this).attr("id"));
            return(false);
        });
   });

});

希望这就是你要找的东西。

Answer 2

这是我做的一个例子，我删除了所有css规则，并用jquery使它们变得简单。

当然，您需要将媒体查询重新放入其中。

Jquery -

$(document).ready(function(){
    $('a').click(function(e){
       var id = $(this).attr('href').split("#").pop();
       var li = $('.slider ul li');
       $('.slider ul li').each(function(key,v){
           //if  linked to li is hidden show it
           if($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).fadeIn(500).slideDown("fast");
            }
            //if it's alrready visible do nothing
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

DEMO

Answer 3

也许使用jQueryUI手风琴将解决您的问题。

请检查：Accordion

淡入/淡出LI并调整容器的高度

3 个答案: