Question

我的网站必须使用禁用javascript的网络浏览器，这个网站有很多jquery动画来控制内容的显示。我已使用//User Input Number Here <select id="manual"> <option value="1000243">1000243</option> //Automatically Generate 200 Number Range <select id="automatic"> <option value="1000243">1000244</option> ...INTO... <option value="1000243">1000443</option>标记内的//User Input Number Here <select id="manual"> <option value="4500123">4500123</option> //Automatically Generate 200 Number Range <select id="automatic"> <option value="4500124">4500124</option> ...INTO... <option value="4500324">4500324</option>正确显示内容，以修改“显示”CSS规则。

现在我卡住了，我有一个表单，当有人点击按钮时出现，现在这个动作被一个jquery函数捕获，修改了“显示”值，但我不知道该怎么做用CSS做的事情。

我的想法就像使用.button-class：active rule但我需要修改另一个CSS规则才能显示

这是一个例子

<style>

Answer 1

这是一种方法：

<强> HTML

<a class="show">Show</a>
<div class="hidden">I'm hidden!
    <input type="text" /></div>

<强> CSS

.hidden {
    display: none;
}
.show:active ~ .hidden, 
.hidden:hover {
    display: block!important;
}

<强>说明：

〜选择器，在其自身之后选择左元素的任何兄弟元素。当按下按钮（或链接）时，div显示，当用户悬停div时，表单将保持可见。

<强>小提琴： https://jsfiddle.net/1y0jrzs9/9/

<强>更新

您可以添加以下css规则，以避免快速悬停表单的困难，或者按下单击鼠标悬停。

.hidden:before {
    z-index: 999;
    content: "";
    display: block;
    position: relative; 
    top: -30px;
    height: 100px;
    width: 100px;
}

伪元素计数作为div的一部分，因此当它显示时，它被视为悬停。

Answer 2

这允许您使用隐藏的输入来设置其他内容的样式，只要它是兄弟或输入的兄弟。在这种情况下，输入显示表单元素。因为输入是隐藏的，所以看起来你在标签中放置的任何内容都会触发更改：

HTML

<div class="switchContainer">
    <label for="hiddenInput1" onclick><button>Show the form</button></label>
    <input type="radio" id="hiddenInput1" value="shown" />
    <form>I'm a form this time but could be anything really</form>
</div>

空的onclick是为了确保它适用于iOS＆lt; 6.0

CSS

/* hide the input */
.switchContainer input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.switchContainer label {
    display: inline-block;
    cursor: pointer;
}

/* Default State of altered element */
.switchContainer form {
    background: #f5f5f5;
    border: 1px solid #aaa;
    margin: 1ex 0;
    padding: 1.6em;
    display: none;
}

/* 'checked' styles for altered element */
.switchContainer input[type=radio]:checked ~ form {
    display: block;
}

还有一个警告：CSS：

body {
    -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

需要确保它适用于Android＆lt; = 4.1.2

https://jsfiddle.net/mLyjk9r4/

在上面的示例中，您只能显示元素（无法取消选中收音机） - 如果您想要切换它，可以使用一个复选框，可以取消选中还原样式的项目（在这种情况下，再次隐藏表格）

https://jsfiddle.net/1L8pmb90/

看起来非常多才多艺，有趣的玩一下

https://jsfiddle.net/ks38r6v9/

摘自：

http://timpietrusky.com/advanced-checkbox-hack

使网站操作在noscript上运行

2 个答案: