1

レスポンシブ デザインのメニュー ボタンを作成したいと考えています。ユーザーがボタンをクリックしたときにメニューを表示し、クリックして戻ったときにメニューを非表示にしたい。

私のHtmlコードは次のとおりです。

<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />

<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>

私が使用する関連する CSS コードは次のとおりです。

.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}

上記のコードはまったく機能しません。チェックボックスがオンの場合、何も起こりません。

私は何か間違ったことをしましたか？

JSFiddle: http://jsfiddle.net/P8DZZ/ (全画面表示/スマートフォン モードを表示するには、行を展開します)

4

1 に答える 1

0

解決策は次のとおりです。

好きな場所にスイッチ ボタンを配置します。

<label for="show_hide">Click here to hide/show the div</label>

表示/非表示にする div の直前にこのコードを配置します。

<input type="checkbox" class="hidden_checkbox" id="show_hide" />

たとえば、この div を非表示にする場合は、次のようにします。

<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
    Your hidden content will be there.
</div>

次に、CSS ファイルに次のコードを追加します。

.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}

最初の行はチェックボックスを非表示にするため、ユーザーはスイッチボタンのみを使用でき、チェックボックスを直接使用することはできません。2 行目でdiv. 3 行目と最後の行は、がチェックされてblockいる場合にのみ、 div 表示を変更する条件hidden_checkboxです。

基本的に、ユーザーがスイッチ ボタンをクリックすると、非表示のチェックボックスがオンになり、hidden_divが表示されます。ボタンをもう一度クリックすると、hidden_divが消えるはずです。

これが誰かを助けることができることを願っています。

于 2013-11-21T10:09:14.663 に答える