1

CSSに関する簡単な質問です。チェックボックス付きのリスト項目がいくつかあり、項目全体をクリック可能にしたいと考えています。簡単です...チェックボックスのラベルにラップするだけです。これは機能します。これが私の2つの問題です（同じことが原因である可能性があると思われるため、ここに両方を掲載しています）。

問題: :not(:last-child) を使用して、各リスト項目 (最後の項目を除く) の間に区切り線を挿入しようとしていますが、問題が発生しています。

ここにjsFiddleがあります

HTML

<div class="box50">
    <div class="filterFolder">Companies<i class="icon-caret-down"></i></div>
    <ul id="companies">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Apple</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Microsoft</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Google</label></li>
    </ul>
    <div class="filterFolder">People<i class="icon-caret-down"></i></div>
    <ul id="people">
        <li><label><input type="checkbox" name="checkbox" value="value" /> Mark Zuckerberg</label></li>
        <li><label><input type="checkbox" name="checkbox" value="value" /> Steve Jobs</label></li>
        <li><label>><input type="checkbox" name="checkbox" value="value" /> Bill Gates</label></li>
    </ul>
    <div class="filterFolder">(+) Add New</div>
</div>

CSS

ul li {
    font-size:12px;
    padding:2px 7px;
    border-bottom:1px dashed #EFEFEF; 
}
    ul li:hover {
        background:#EFEFEF;
        cursor:pointer;
    }
    .listSelected {
        background:red;
    }
4

3 に答える 3

1

私はそれを次のように解決します：

HTML

<li>
    <label>
        <input type="checkbox" name="checkbox" value="value"> Apple
    </label>
</li>

CSS

ul label {
    display: block;
    border-bottom:1px solid red;
}

ul li:last-child label {
    border:none;
}

これは有効なHTMLであり、全体<li>がクリック可能のようです。実際には、まだクリックしてい<label>ます。

別の注意：アイコンを挿入する場合は、スパンの<span>代わりに意味的な意味を持たず、スタイルを追加する唯一の目的を使用してください。<i>

于 2013-02-05T16:08:26.343 に答える
1

これらは 2 つの別個の問題です。

最初の問題は、html が無効であるという事実によるものです。liの子になることができるのはのみですul。 labelは有効な子ではありません。解決策は非常に簡単です: を逆ではなく逆にラップし、<label>それ<li>に応じてスタイル ルールを変更します。

2 番目の問題は、入力がチェックされるというラベルのデフォルト アクションが原因で、ラベルのクリック イベントが再度 (つまり 2 回) 発生するという、少し奇妙な動作によるものです。これを説明することはできませんが、簡単な解決策は、入力がチェックされているかどうかをチェックして、クラスを追加する必要があるかどうかを判断することですclick。

if ($(this).find('input').prop('checked')) {
    $(this).addClass("listSelected");
}
else {
    $(this).removeClass("listSelected");
}

http://jsfiddle.net/ExplosionPIlls/GFcvf/

于 2013-02-05T16:10:23.873 に答える
1

いくつかの小さな変更をお勧めします。

  1. display: blockLI 全体に広がるようにラベルを作成します。そうすれば、ラベルは LI 内のどこでもクリックをインターセプトします。

  2. クリック ハンドラーをチェックボックス自体にアタッチします (上記はこれを容易にします)。クリックするjQuery.closest()と、対応する LI を検索し、それに CSS を適用するために使用します。

  3. li:not(:last-child)つまり、最後の子である LI を除くすべての LI を選択します。

これで 3 つの質問すべてに答えられることを願っています。

デモはこちら

于 2013-02-05T16:19:46.807 に答える