jquery获得切换的div的可见性

问题描述 投票:0回答:1

我有一个带有几个按钮的页面和一个关联的文本div。我可以通过单击每个按钮来切换文本div的可见性。我想获得每个文本div的可见性,并使用它来重现页面状态。如何获得文本div的“可见性”?

到目前为止,我的代码仅以“可见”作为响应。

非常感谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Visibility</title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        function getVis(textDiv){
            if ($(textDiv).is(":visible")) {
                alert("visible");
            }else{
                alert("not visible");
            }
        }
    </script>
</head>

<body>
    <button id="btn1" onclick="$(div1).slideToggle(500), getVis(div1)">button 1</button>
    <div id = "div1">div 1 text</div>
    <br>
    <button id="btn2" onclick="$(div2).slideToggle(500), getVis(div2)">button 2</button>
    <div id = "div2">div 2 text</div>
</body>
</html>
jquery toggle visibility
1个回答
0
投票

由于slideToggle是过渡(超时操作),请检查可见性在先以调用该过渡,即反转呼叫顺序。例如

 <button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>

这里是演示。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Visibility</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function getVis(textDiv){       
            if ($(textDiv).is(":visible")) {
                alert("visible");
            }else{
                alert("not visible");
            }
        }
    </script>
</head>
  <body>
      <button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>
      <div id = "div1">div 1 text</div>
      <br>
      <button id="btn2" onclick="getVis(div2), $(div2).slideToggle(500)">button 2</button>
      <div id = "div2">div 2 text</div>
  </body>
</html>

要确定可见性状态之后过渡,请像这样从完成例程中调用getVis

<button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button>

这里是完成方法的演示。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Visibility</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        function getVis(textDiv){       
            if ($(textDiv).is(":visible")) {
                alert("visible");
            }else{
                alert("not visible");
            }
        }
    </script>
</head>

<body>
    <button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button>    <div id = "div1">
     div 1 text
    </div>
    <br>
    <button id="btn2" onclick="$(div2).slideToggle(500, function() { getVis(div2) })">button 2</button>
    <div id = "div2">div 2 text</div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.