Question

我正在寻找使用响应的网站。我有一个包含徽标，搜索栏和其他一些按钮的栏。我想要做的是使用媒体查询来隐藏搜索栏移动并通过按钮激活它，但我无法使其工作。这是我的表单代码：

＆＃13;

function resize() {
  if ($(window).width() < 1105) {
    alert("Hello World!");
  } else {
    document.getElementById("formular").submit();
  }
}

＆＃13;

<form action="cautare-test.php" method="post" id="formular">
  <input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
  <button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>

＆＃13;

我的问题是，在宽度高于1105的情况下，表单会被提交，但是在低于此值的分辨率下，按下按钮时没有警告框。请提前感谢您的帮助，我希望能够提供帮助。我真的很想听到响应式设计的其他解决方案。

Answer 1

如果添加了jquery，您的代码可以正常工作。也许你忘记添加它或者不想使用它。然后，您需要添加jquery或将您的jquery方法更改为vanillaJs window.innerWidth

＆＃13;

function resize() {
  if (window.innerWidth  < 1105) {
    alert("Hello World!");
  } else {
    document.getElementById("formular").submit();
  }
}

＆＃13;

<form action="cautare-test.php" method="post" id="formular">
  <input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
  <button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>

＆＃13;

Answer 2

以下是如何使用媒体查询以及最少的javascript来完成您所描述的内容的示例。（这里的JS仅用于切换栏上的“show”类名。我在这里使用jQuery是为了方便，因为你的问题中有一些，但在vanilla JS中也可以这样做。）你需要“在下方展开代码段以查看尺寸响应性：

$('#btn').on("click",function() {
  $('#bar').toggleClass("show")
});

@media screen and (max-width: 1105px) {
  #bar {display:none}       /* Hide the bar on small screens... */
  #bar.show {display:block} /* ...unless the user asked to show it */
}

@media screen and (min-width: 1105px) {
   #btn {display:none}      /* Hide the button on large screens */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar">This is the search bar, which you want to hide on smaller screens</div>

<button id="btn">This is the "show the search bar" button, which should only be visible on smaller screens</button>

IF条件无法处理表单

2 个答案: