Question

我正在尝试学习如何使用jQuery进行HTML文本切换，这本身很简单，但我希望文本自动隐藏，直到用按钮点击它。我查了一下，但我找不到如何做到这一点。我认为应该很容易，我有这个部分

    void __fastcall TForm9::Button1Click(TObject *Sender)
    {
       int X , Y , W , H;

       if(Image1->Bitmap->Width >= Image1->Bitmap->Height)
       {
          H = Image1->Bitmap->Height;
          X = (Image1->Bitmap->Width - Image1->Bitmap->Height) / 2;
          Y = 0;
          W = H;
       }
       else
       {
          W = Image1->Bitmap->Width;
          X = 0;
          Y = (Image1->Bitmap->Width - Image1->Bitmap->Height) / 2;
          H = W;
       }

       TRect rect(X, Y, W, H);
       TBitmap * bm = new TBitmap(W,H);
       bm->CopyFromBitmap(Image1->Bitmap ,rect ,X,Y);

       Circle1->Fill->Bitmap->Bitmap->Assign(bm);

       Image2->Bitmap->Assign(bm);
       delete bm;
    }

作为常规切换工作正常，但这会将文本留在那里直到第一次点击。

Codepen：https://codepen.io/anon/pen/bYYeEB

Answer 1

jQuery show，hide和toggle函数只是将CSS display属性更改为display: block;或display: none;。

要隐藏您的元素，只需设置样式属性style="display:none;"。

Answer 2

$(document).ready(
  function(){
    $("#button1").click(toggle);
  }
);

function toggle() {
  $("#text1").toggle();
}

toggle();

在底部调用toggle会自动隐藏元素。这仍然不是最大的，因为该元素将在此代码运行之前显示。

但您可以随时将HTML更改为：

<h4 id="text1" style="display:none">This is some toggleable text</h4>

然后您不需要第一次致电toggle。

Answer 3

<script>
  $(document).ready(function() {
  $("#text1").css("display", "none");//you just have to add this line 
  $("#button1").click(function() {
  $("#text1").toggle();
 });
});
</script>

如何在点击之前隐藏HTML文本

3 个答案: