Question

好的，所以在几个网站的帮助下，我能够将这些代码放在一起，以停用网站的响应式编码并激活无响应的编码。但是，再次单击链接时，它不会反向执行此功能。

我尝试使用“.toggle”，但这不起作用。我应该使用哪个事件来获得这种效果？任何帮助都会很棒！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

$(document).ready(function () {
    $("#togglerwd").click(function() {
        $('meta[name="viewport"]').prop('content', 'width=1440');
    });
});
</script>

<a href="#" id="togglerwd">Toggle Responsive Layout</a>

Answer 1

当点击超链接时，是否存在允许代码处于活动状态和非活动状态的事件？

点击本身就是正在发生的事件 - 但该事件并不知道您的网页当前处于什么状态。

“flag”是一种常见的编程基础，并不是特定于jQuery或JavaScript。基本上它只是一个变量，其值在true和false之间交替，并根据您决定要做什么。

它看起来像这样：

$(document).ready(function (e) {
    // set the initial flag value, we assume your page “starts” in responsive mode
    var isResponsive = true;

    $("#togglerwd").click(function() {
        // check flag, to see what state the page is in
        if(isResponsive) {
          // set viewport meta to “non-responsive”
          $('meta[name="viewport"]').prop('content', 'width=1440');
          // remember current state in flag for check on next click
          isResponsive = false;
        }
        else {
          // set viewport meta to “responsive”
          $('meta[name="viewport"]').prop('content', 'width=device-width');
          // remember current state in flag for check on next click
          isResponsive = true;
        }
    });
});

Answer 2

非常感谢您对CBroe的帮助，但我最终创建了我想要的确切解决方案。这是代码：

<script>
$(document).ready(function () {
    $("#togglerwd").click(function() {
        $('meta[name="viewport"]').prop('content', 'width=1440');
  });
    $("#togglerrl").click(function() {
        $('meta[name="viewport"]').prop('content', 'width=device-width');
  });
});
</script>

<a href="#" id="togglerwd">Full Site | </a>
<a href="#" id="togglerrl">Responsive Layout</a>

如何在响应式和非响应式设计之间切换

2 个答案: