Question

我有一个div，当你点击它时，它会被认为是不可见的，当你再次点击它时，它会被认为是可见的。但是我的代码出了点问题。请看一下：

<div id = "id"> Hello </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"> 

//*****************************************************************************

function toggleOnClick($id){

$("#"+$id).click(function() {   
$("#"+$id).toggle(

function () {
$(this).css({visibility: "hidden"});
}, 
function () {
$(this).css({visibility: "visible"});

}); //end of $("#"+$id).toggle

}); //end of $("#"+$id).click(function()    

} //end of function toggleOnclick($id)

//*****************************************************************************

$(document).ready(function(){

toggleOnClick("id");

});         

</script>

P.S：从此链接中接受的答案获得我的来源：jQuery toggle CSS?

Answer 1

tggle()会在display属性之间切换，因此在隐藏后它不会保留元素的位置，您需要使用带有回调的css()并更新其opacity，它将保留它的位置。

更新：点击事件不会针对visibility: hidden的元素触发，因此您需要使用opacity:0

css()中的回调函数是一个返回值的函数。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。（摘自http://api.jquery.com/css/#css-propertyName-function）

＆＃13;

<div id="id">Hello</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
  //*****************************************************************************

  function toggleOnClick($id) {

      $("#" + $id).click(function() {
        $("#" + $id).css('opacity', function(i, v) {
          return v == 0 ? 1 : 0; //end of $("#"+$id).toggle
        });
      }); //end of $("#"+$id).click(function()    

    } //end of function toggleOnclick($id)

  //*****************************************************************************

  $(document).ready(function() {

    toggleOnClick("id");

  });
</script>

＆＃13;

使用jQuery中的切换使div不可见且可见

1 个答案: