Question

我遇到了fiddle问题。我有一个链接列表，每个链接打开一个不同的幻灯片。我想要的是，当点击任何链接时，检查是否有一个打开的幻灯片并在新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");
    });
  });
});

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

此外，我想在相应的幻灯片打开时更改颜色的链接，但它不像现在这样工作。如果有人可以帮助我，我会很感激。

Answer 1

我认为你遇到了问题，因为你在给定时间内有多个项目在滑动。解决方案check this 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");
              })
           });

        });
     });

在滑下新的之前，jQuery向上滑动打开div

1 个答案:

的javascript