Question

我有一个div，当点击时应该隐藏自己。然后，如果再次单击它，它将显示自己。然后，如果再次点击它，它将再次隐藏自己，依此类推。

第一次点击它时，它会检查变量$ visible是否为真。如果$ visible为true，则将其隐藏，然后将$ visible设置为null。否则如果$ visible不为真，它会显示它，然后将$ visible设置为true。但由于某种原因，它根本不会这样做。

我确定我做错了，所以请看一下我的代码：

<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 hideOnClick($id) {
    $("#" + $id).click(function() {
      $(this).hide();
    });
  }

  function showOnClick($id) {
    $("#" + $id).click(function() {
      $(this).show();
    });
  }

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

  $(document).ready(function() {
    $id = "id";
    $visible = "true";

    $("#" + $id).click(function() {
      if ($visible == "true") {
        hideOnClick($id);
        $visible = null;
      } else {
        showOnClick($id);
        $visible = "true";
      }
    }); //end of $("#"+$id).click(function()      
  }); //end of $(document).ready(function()

  //*************************************************************
</script>

结果：

First click on div #id: Nothing happens.
Second click on div #id: #id hides itself
Third click on div #id: Nothing happens. Doesn't show itself again.
Fourth click on div #id: Nothing happens. Doesn't show itself again.
Fifth click on div #id: Nothing happens. Doesn't show itself again.
And this continues on indefinitely...

Answer 1

首先，我要说jQuery already has a feature for that, named .toggle。

其次，如果你隐藏了div，它就不再在你的页面内了，所以你无法点击它。

所以，如果你想这样做，你需要使用CSS opacity: 0或visibility: hidden。 E.g：

$(this).css('visibility', 'hidden');  // to hide
$(this).css('visibility', 'visible'); // to show

Answer 2

您可以使用jQuery的切换类：

 $("#myID").click(function(){
        $("#myID").toggleClass("visible");
    });

假设您有一个名为visible的类：

.visible{
  visibility: hidden;
}

Answer 3

您也可以在不创建按钮的情况下执行此操作：

    $(":not(#div)").click(function(){$('#div').show();});

而不是：

    $("#div").click(function(){$('#div').show();});

隐藏部分：

     $("#div").click(function(){$(this).hide();});

使用jQuery隐藏和显示div

3 个答案: