19

を切り替えたいのですが、私の要件は、オフにし<div>て動作する必要があるということです。javascript「検索の変更」というハイパーリンクを選択すると、検索条件が表示される div が表示されます。

を使用した多数のデモを見つけましたが、それらはすべて有効jQueryにする必要があります。javascript任意の支援をいただければ幸いです。

4

11 に答える 11

38

ほら、船長！(編集— 科学のために更新)

HTML:

<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
    Hello. This is some stuff.
</div>

CSS:

input:checked + div { display: none; }

編集— 追加の注意:display: none特定のブラウザ (IE) がチェックボックスに注意を払わないようにし<input>ます。CSS 属性で非表示にする代わりに、displayなどで画面外に「移動」できますposition: absolute; left: -10000px;。

于 2012-06-13T21:56:47.973 に答える
14

これに続く簡単な例を次に示します。JAVASCRIPT と JQUERY を使用せずに css を使用してトグルを作成できます。JQUERY なしで css を使用してアニメーションを追加することもできます。CSS3は素晴らしいです！:)

.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>

于 2016-06-27T09:58:09.077 に答える
5

javascriptなしでクリックを切り替えることはできません。終わり。

アップデート：

セレクターを使用できる場合はCSS 3、DOM構造を変更CSS 3し、JavaScriptをオフにしているユーザーよりもはるかに一般的な古いブラウザーをカバーするライブラリなしでセレクターを使用する必要があります。@pointyanswerをで使用できます:selected。

だから、実際にはまだ不可能だと思います...！

于 2012-06-13T21:50:48.053 に答える
2

あなたが求めることはJavaScriptなしでは不可能です。（または、@ Pointyが指摘しているように、CSS3セレクター。）

要件を変更する必要があります。さらに良いのは、デフォルトでフォームを表示し、JavaScriptユーザーに対して非表示にすることです（必要な場合）。あなたのページは誰にとっても機能し、それらを使用できない人のために重要でない機能を無効にすることができます。

于 2012-06-13T21:50:14.773 に答える
1

Javascriptもトグルもありません。いくつかの疑似CSS3メソッドがありますが、JSをオフにサポートする必要がある場合は、CSS3をサポートしていないことは確かです。

于 2012-06-13T21:51:42.423 に答える
0

他の人が言っているように、divの切り替えを実現するにはJSを使用する必要があります。あなたのウェブサイトがjavascriptを無効にして動作させたい場合は、javascriptが利用できないときにうまく失敗するようにあなたのウェブサイトを設計する必要があります。言い換えれば、あなたのウェブサイトは機能するためにJavaScriptに依存すべきではありません。例：AJAXフォームはHTTP送信などにフォールバックする必要があります。

于 2012-06-13T21:52:34.543 に答える
0

Javascriptを使用するか、別のリクエストを送信しないと、それを行うことはできません.

余分なリクエストに耐えられる場合 (つまり、追加されたページの読み込みが問題ない場合)、最も簡単な解決策は、リンクを現在の URL にポイントすることですが、クエリ文字列パラメーターを追加することhttp://example.com/current-page?showsearch=1です。次に、サーバーでshowsearchパラメーターが設定されているかどうかを確認し、設定されている場合は検索 div を初期化して表示します。

もちろん、ページの残りの状態がリクエストに耐えられるように注意する必要があります。ユーザーが入力した可能性のあるデータを引き継ぐためにフォームを使用する必要がある場合があります。これは、リンクをリンクにすることはできず、ボタンにする必要があることを意味します (リンクは Javascript なしではフォームの送信をトリガーできないため)。 ）。

于 2012-06-13T21:54:40.993 に答える
0

JS を無効にしてこれを機能させる方法は、ハイパーリンクに、必要なタスクを達成するための href を設定することです。

/the/original/url?advance-search=true

?advanced-search=true が存在する場合、Web サーバーは異なるコンテンツを配信します。JS が有効になっている場合、調査した jquery コードは元のアクションをキャンセルするだけです。

于 2012-06-13T21:54:49.347 に答える