jQuery切换不能使用附近示例中的许多其他JavaScript

时间：2017-02-05 08:03:48

标签： javascript jquery html

我在How can I dynamically create derived classes from a base class的示例后面有一个简单的jquery切换按钮：

＆＃13;
＆＃13; 
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

  </style>

  <script type="text/javascript">
    //Need an expert? I'm cody childers, cut-n-paste extraordinaire

    $('#contact-info-button').click(function() {
      $('#contact-info').toggle();
    });

    function toggle(div_id) {
      var el = document.getElementById(div_id);
      if (el.style.display == 'none') {
        el.style.display = 'block';
      } else {
        el.style.display = 'none';
      }
    }

    function blanket_size(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
      } else {
        viewportheight = document.documentElement.clientHeight;
      }
      if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
      } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
          blanket_height = document.body.parentNode.clientHeight;
        } else {
          blanket_height = document.body.parentNode.scrollHeight;
        }
      }
      var blanket = document.getElementById('blanket');
      blanket.style.height = blanket_height + 'px';
      var popUpDiv = document.getElementById(popUpDivVar);
      popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
      popUpDiv.style.top = popUpDiv_height + 'px';
    }

    function window_pos(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
      } else {
        viewportwidth = document.documentElement.clientHeight;
      }
      if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
      } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
          window_width = document.body.parentNode.clientWidth;
        } else {
          window_width = document.body.parentNode.scrollWidth;
        }
      }
      var popUpDiv = document.getElementById(popUpDivVar);
      window_width = window_width / 2 - 150; //150 is half popup's width
      popUpDiv.style.left = window_width + 'px';
    }

    function popup(windowname) {
      blanket_size(windowname);
      window_pos(windowname);
      toggle('blanket');
      toggle(windowname);
    }

    setInterval(function() {
      if ($('#myDiv').hasClass('divClassRed')) {
        $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

      } else {
        $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
      }

    }, 1000);
  </script>
</head>


<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
  <p>trollface pic in here</p>
  <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a>
</p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
  <p>jon_do@example.com</p>
  <p>512-736-5555</p>
</div>
＆＃13;
＆＃13;
＆＃13;

我正在尝试使用contactinfo按钮工作。我在DOM中没有错误。

3 个答案:

答案 0 :(得分：1)

试试这个。

$('#contact-info-button').click(function() {
  $('#contact-info').slideToggle();
});

滑动切换非常棒：）

答案 1 :(得分：1)

我看到它有效。你在html中犯了一些错误。与</style>结尾标记类似，没有任何<style>开始标记。没有<body>标签等。请参阅此处：

//Need an expert? I'm cody childers, cut-n-paste extraordinaire

      $('#contact-info-button').click(function() {
          $('#contact-info').toggle();
      });

      function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=blanket_height/2-150;//150 is half popup's height
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2-150;//150 is half popup's width
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);
    }

    setInterval(function(){
        if($('#myDiv').hasClass('divClassRed')){
            $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

        }else{
                   $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
        }

    },1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
    <p>trollface pic in here</p>
    <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a></p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
    <p>jon_do@example.com</p>
    <p>512-736-5555</p>
</div>

答案 2 :(得分：1)

将所有脚本标记放在结束正文标记之前，并将代码包装在$(document).ready()中，同时在头部还有一个结束样式标记，这是我无意中遗漏的。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Website</title>
</head>
<body>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
  <p>trollface pic in here</p>
  <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a>
</p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
  <p>jon_do@example.com</p>
  <p>512-736-5555</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>  
  <script type="text/javascript">    
  $(document).ready(function(){
        $('#contact-info-button').click(function() {
      $('#contact-info').toggle();
    });

    function toggle(div_id) {
      var el = document.getElementById(div_id);
      if (el.style.display == 'none') {
        el.style.display = 'block';
      } else {
        el.style.display = 'none';
      }
    }

    function blanket_size(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
      } else {
        viewportheight = document.documentElement.clientHeight;
      }
      if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
      } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
          blanket_height = document.body.parentNode.clientHeight;
        } else {
          blanket_height = document.body.parentNode.scrollHeight;
        }
      }
      var blanket = document.getElementById('blanket');
      blanket.style.height = blanket_height + 'px';
      var popUpDiv = document.getElementById(popUpDivVar);
      popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
      popUpDiv.style.top = popUpDiv_height + 'px';
    }

    function window_pos(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
      } else {
        viewportwidth = document.documentElement.clientHeight;
      }
      if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
      } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
          window_width = document.body.parentNode.clientWidth;
        } else {
          window_width = document.body.parentNode.scrollWidth;
        }
      }
      var popUpDiv = document.getElementById(popUpDivVar);
      window_width = window_width / 2 - 150; //150 is half popup's width
      popUpDiv.style.left = window_width + 'px';
    }

    function popup(windowname) {
      blanket_size(windowname);
      window_pos(windowname);
      toggle('blanket');
      toggle(windowname);
    }

    setInterval(function() {
      if ($('#myDiv').hasClass('divClassRed')) {
        $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

      } else {
        $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
      }

    }, 1000);

  });

  </script>  
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题