0

順序付けされていない () HTML リストを使用していくつかの MultiSelect 要素をスタイリングしていますが、最新の関数(別の要素がクリックされたときにコンテナーを閉じる)を追加すると、別の関数の 1 つが機能しなくなりました - チェックボックスの値を表示する関数チェック済み。

完全なコードのフィドルはこちら: http://jsfiddle.net/chayacooper/ezxSF/19/

私が追加している機能

// Close the container when click elsewhere on the page 
$('html').click(function () { $('#select_colors').hide(); });
$('.dropdown_box_colors, .dropdown_container_colors').click(function (e) {
    e.stopPropagation();
    return false;
});

オリジナル機能

$(document).ready(function () {
    // Opens the container and close it on mouseleave
    $(".dropdown_box_colors").click(function () {
        $("#select_colors").show();
    });           
    var timeoutID;
    $("#select_colors").mouseleave(function () {
            timeoutID = setTimeout(function () {
        $("#select_colors").hide();
        }, 800);
    });
    $("#select_colors").mouseenter(function () {
        clearTimeout(timeoutID);
    });
    // Displays the values of checkboxes checked in a container (adds/removes them when they're checked/unchecked). Displays the # selected if more than 3 items are checked
    $(".dropdown_container_colors input").change(function () {
        var checked = $(".dropdown_container_colors input:checked");
        var span = $(".dropdown_box_colors span");
        if (checked.length > 3) {
            span.html("" + checked.length + " selected");
        } else {               
            span.html(checked.map(function (){
                return $(this).closest('label').clone().children().remove().end().text(); 
            }).get().join(", ")); 
        }
    });
});
// Toggles the visibility of the checkmark 
function toggle_colorbox_alt(span) {
    div = span.getElementsByTagName('div')[0];
    cb = span.getElementsByTagName('input')[0];
    if (cb.checked == false) {
        div.style.visibility = "visible";
        span.className = "colorSwatch colorSwatchSelected";
        cb.checked = true;
    }
    else {
        div.style.visibility = "hidden";
        span.className = "colorSwatch";
        cb.checked = false;
    }
}

HTML

<div class="dropdown_box_colors"><span>Select</span></div>
<div class="dropdown_container_colors"> 
    <ul id="select_colors">  
        <li>
            <a href="#"><label onclick="toggle_colorbox_alt(this.children[0]);">
            <div style="background-color: #000000" class="colorSwatch">
                <div class=CheckMark>&#10003;</div>
                <input type="checkbox" name="color[]" value="Black" class="ckBox"/>
            </div>Black</label></a>
        </li>   
        <!-- Additional List Items --> 
    </ul>
</div>
4

1 に答える 1

0 
Try removing return false from onclick event handler after calling stopPropagation().

Have a look at the working fiddle here: http://jsfiddle.net/ezxSF/22/
于 2013-03-08T06:00:03.460 に答える