0

我对我的问题有意见。我有一个链接列表，每个链接打开一个不同的幻灯片。我想要的是，在单击任何链接时，检查是否有打开的幻灯片并在新的 div 向下滑动之前将其关闭（向上滑动）。我现在拥有它的方式有点工作，但新的 div 似乎在打开的 div 上滑动，而不是先关闭现有的幻灯片（向上）然后向下滑动新的。

HTML

<body>
  <div id="slide1-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 1</div>
  </div>

  <div id="slide2-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 2</div>
  </div>

  <div id="slide3-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 3</div>
  </div>

  <div id="work-list">
    <ul>
      <li class="client" id="slide1">Section1</li>
      <li class="client" id="slide2">Section2</li>
      <li class="client" id="slide3">Section3</li>
    </ul>
  </div><!-- End work-list -->

</body>

JS

$(document).ready(function() {

  $(".close-project").click(function(){
    $(".flexslider").slideUp("slow");
    $("#work-list ul li").removeClass("current");
  });

  $(".client").click(function() {
    var project = this.id;
    var project_id = '#' + project + '-project';
    $(".flexslider").slideUp('slow');
    $(project_id).slideDown('slow', function() {
        $(project).addClass("current");
    });
  });
});

有人可以帮我更正代码吗？

另外，我希望链接在打开相应的幻灯片时改变颜色，但它不像现在这样工作。如果有人也可以帮助我，我将不胜感激。

4

1 回答 1

2

我认为您遇到问题是因为您在给定时间有多个项目向上滑动。检查这个jsfiddle的解决方案

javascript

     $(function () {
        $(".close-project").click(function () {
           $(".flexslider").slideUp("slow");
           $("#work-list ul li").removeClass("current");
        });

        $(".client").click(function () {
           var project = this.id;
           var project_id = '#' + project + '-project';

           var elem  = $(".flexslider:visible").length? $(".flexslider:visible") : $(".flexslider:first")
           elem.slideUp('slow', function () {
              $(project_id).slideDown('slow', function () {
                 $(project).addClass("current");
              })
           });

        });
     });
于 2013-05-04T00:51:11.627 回答