Question

我创建了一个滑动div，当您单击图像时会显示一些内容。一切都工作正常，但是当你单击上一个箭头/关闭按钮时，div会跳转。它关闭然后再次打开。

我只想在点击那个小箭头时关闭div。我真的看不出我做错了什么......

我创建了fiddle以显示我的意思。任何帮助是极大的赞赏。

在我的代码和HTML下面：

 $('#sets .set').each( function(){

    $(this).click(function(){
      if($(this).hasClass('open')){

         $('.close').click(function(){

           $('#sets .set').removeClass('open');

          $('.products',this).animate({
            width: 'toggle'},500, function() {
              $('#sets .product').fadeOut();
              $(this).css('z-index', '5');
              $(this).removeClass('open');

              $(this).hide();
              $(this).css('z-index', '5');
              $(this).removeClass('open');
            });
           });
      } else {


        $('#sets .set .product').hide();
        $('#sets .set .products').hide();
        $('#sets .set').css('z-index', '5');
        $('#sets .set').removeClass('open');
        $('#sets .set .products').removeClass('open');

        $(this).addClass('open');
        $(this).css('z-index', '1000');
        $('.products',this).animate({
          width: 'toggle'},500, function(){
            $('#sets .product').fadeIn();
            $(this).addClass('open');  
            $(this).css('z-index', '1000');
          });

      }      
    });
  });

HTML

<div id="sets" class="clearfix">

  <div class="set">
    <div class="mededeling">
      <div class="mededeling-txt">
        click me!
      </div>
      <div class="mededeling-bg"></div>
    </div>
    <div class="right">

      <div class="products">
        <div class="close"></div>

        <div class="product">
          some awesome content
            some awesome content
            some awesome content
            some awesome contentsome awesome content
            some awesome content
        </div>

        <div class="set-bestellen">
          <div class="set-bestellen-kop">Order?</div>
          <div class="total price"></div>
          <div class="link">

              <a title="Add to cart" class="btn-wd trigger" href="/cart"><span>Add to cart</span></a>

          </div>
        </div>
      </div><!-- .products -->
    </div><!-- .right -->
    <div class="img">

      <img src="" />

    </div>

  </div>


</div>

Answer 1

您的点击处理程序和动画搞砸了。例如，在每次set点击时，您将创建一个新的close点击处理程序。这是不必要的。

我尝试清理它以给你一个想法，但是仍然需要一些工作，但能够在一个页面上使用多个集合，例如：

http://jsfiddle.net/o2x9s6gk/2/

 $('#sets .set').click(function () {
     if (!$(this).hasClass('open')) {
         $('#sets .set .product').hide();
         $('#sets .set .products').hide();
         $('#sets .set').css('z-index', '5');
         $('#sets .set').removeClass('open');
         $('#sets .set .products').removeClass('open');

         $(this).addClass('open');
         $(this).css('z-index', '1000');
         $('.products', this).animate({
             width: 'toggle'
         }, 500, function () {
             $('#sets .product').fadeIn();
             $(this).addClass('open');
             $(this).css('z-index', '1000');
         });

     }
 });


 $('.close').click(function () {
     $('#sets .product').fadeOut(200, function () {
         $('.products').animate({
             width: 'toggle'
         }, 500, function () {
             $('#sets .set').removeClass('open');
             $(this).css('z-index', '5');
             $(this).removeClass('open');

             $(this).hide();
             $(this).css('z-index', '5');
             $(this).removeClass('open');
         });
     });

 });

滑动div左右跳跃

1 个答案: