Question

我希望两个jquery翻转开关在一行中，当屏幕太窄时，其中一个不可见。

为了让他们得到不同的对待，他们需要被分配不同的类，但这在某种程度上是行不通的。当将类或id分配给p或div时，条件有效，但那些元素不会出现在一行中。

如何在保留一行的同时为它们分配一些类？

Answer 1

最有效的方法是使用一行，两列。

Answer 2

并且这是通过css完成的相同的事情，据说它比js更适合于对象定位。实际上，对于这个版本，只要你改变它的实时模式的分辨率，dreamweaver会立即响应。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</script><script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
<style>
@media screen and (min-width:1px) and (max-width:319px) {
.bigga {
    display: none;
}
}
div.ui-slider-switch {
    width: 7em
}
</style>
</head>

<body>
<table width="200" border="0">
  <tr>
    <td><div align="center" class="bigga">
        <select data-role="slider" >
          <option value="off">boy</option>
          <option value="on"> girl</option>
        </select>
      </div></td>
    <td><div  align="center">
        <form >
          <select data-role="slider" >
            <option value="off" accesskey=""    >man</option>
            <option value="on"  > woman</option>
          </select>
        </form>
      </div></td>
  </tr>
</table>
</body>
</html>

jquery分类翻转开关而不使用div

2 个答案: