Question

所以，当我点击一个按钮时，我只是想从它的位置触发一个元素到另一个位置。然后，如果我再次单击该按钮，我希望它返回原来的位置。我有这个代码。

$(document).ready(function() {
    $('.trigger').click(function() {
    $('.trigger').toggle(
         function() {
             $('.mod').css({'margin-left':'0px'});
             },
         function() {
             $('.mod').css({'margin-left':'-100px'});
             }
         );
    });
});

当我按下按钮时，元素就能完成我想要的。但按钮消失了。而且我不太确定，元素会被触发回来现在我只想要一个可以完成工作的工作代码。

Answer 1

.toggle()隐藏并显示目标元素，因此您需要其他内容。一种方法是，只检查元素的margin-left：

$(document).ready(function() {
    $('.trigger').click(function() {
        alert($('.mod').css('margin-left'));
        if($('.mod').css('margin-left') == '0px') {
           $('.mod').css('margin-left', '-10px');
        }
        else {
            $('.mod').css('margin-left', '0px');
        }
    });
});

Fiddle

Answer 2

这个怎么样

$(document).ready(function() {
    $('.trigger').click(function(event) {
    event.preventDefault();
    if ( $(this).hasClass("isLeft") ) {
        $(".mod").stop().css({'margin-left':'0px'});                            
    } else {
        $(".mod").stop().css({'margin-left':'50px'}); //given +50px because it disappears when -50px is given
    }
    $(this).toggleClass("isLeft");
    return false;
    });
});

<强> DEMO FIDDLE

Answer 3

如果你正在使用jQuery 1.9或更高版本，问题是$(document).ready(function() { $(".trigger").click(function() { var f = !$(this).data("toggleFlag"); if (f) { $('.mod').css({'margin-left':'0px'}); } else { $('.mod').css({'margin-left':'-100px'}); } $(this).data("toggleFlag", f); }); });事件处理方法已从库中删除。

您可以实现自己的切换：

<div id="accordion3" class="accordion">
<!-- D1 -->
    <h3 class='ach plus' id="1">Assignment Initiation Form</h3>
    <div style="width:100%;">
       content
    </div>

    <!-- D2 -->
    <h3 class='ach plus' id="2">Flag potential candidates</h3>
    <div style="width:100%;">
     content
    </div>
</div>

这使用.data()方法来跟踪布尔标志，以指示要执行的代码。

DEMO FIDDLE

Answer 4

您需要toggle，.mod而不是.trigger

$(document).ready(function() {
  $('.trigger').click(function() {
    $('.mod').toggle(
      function() {
         $('.mod').css({'margin-left':'0px'});
      },
      function() {
         $('.mod').css({'margin-left':'-100px'});
       }
     );
  });
});

<强> Demo

JavaScript / jQuery制作触发器时出现问题

4 个答案: