HTML, CSS 및 jQuery: 체크박스가 있는 다중 선택 드롭다운 메뉴 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 체크박스가 있는 다중 선택 드롭다운 메뉴 만들기

PHPz

풀어 주다： 2023-10-27 14:22:59

원래의

1753명이 탐색했습니다.

HTML, CSS 및 jQuery: 체크박스가 있는 다중 선택 드롭다운 메뉴 만들기

HTML, CSS 및 jQuery: 체크박스를 사용하여 다중 선택 드롭다운 메뉴 만들기

인터넷의 지속적인 발전과 함께 웹 디자인과 인터랙티브 경험이 점점 더 중요해지고 있습니다. 과거에는 마우스 클릭을 통해 선택하는 것이 일반적인 상호 작용 방법이었지만, 사용자 요구가 다양해짐에 따라 보다 유연하고 지능적인 상호 작용 방법이 필요합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 확인란이 있는 다중 선택 드롭다운 메뉴를 만드는 방법을 소개합니다.

먼저 선택 상자와 여러 옵션이 포함된 기본 HTML 구조를 만들어야 합니다. 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>多选下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="dropdown">
        <button class="dropbtn">选择项</button>
        <div class="dropdown-content">
            <input type="checkbox" id="item1" name="item1" value="item1">
            <label for="item1">选项1</label><br>
            <input type="checkbox" id="item2" name="item2" value="item2">
            <label for="item2">选项2</label><br>
            <input type="checkbox" id="item3" name="item3" value="item3">
            <label for="item3">选项3</label><br>
        </div>
    </div>
</body>
</html>

로그인 후 복사

다음으로 CSS를 사용하여 드롭다운 메뉴를 아름답게 만들어야 합니다. style.css 파일에 다음 코드를 추가하세요:

/* 隐藏下拉菜单 */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
}

/* 隐藏复选框 */
.dropdown-content input[type="checkbox"] {
    display: none;
}

/* 样式化下拉菜单按钮 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 鼠标移动到下拉菜单上时显示选项 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 选中选项时改变背景颜色 */
.dropdown-content input[type="checkbox"]:checked + label {
    background-color: #ccc;
}

로그인 후 복사

위 코드에서는 몇 가지 기본 CSS 스타일을 사용하여 드롭다운 메뉴를 숨기고 표시하고 선택한 옵션의 배경색을 변경했습니다.

이제 jQuery를 사용하여 드롭다운 메뉴의 대화형 동작을 구현해야 합니다. script.js 파일에 다음 코드를 추가하세요.

$(document).ready(function() {
    // 点击按钮时显示或隐藏下拉菜单
    $(".dropbtn").click(function() {
        $(".dropdown-content").toggle();
    });

    // 当有选项被选中或取消选中时，更新按钮文本
    $(".dropdown-content input[type='checkbox']").change(function() {
        var selectedItems = [];
        $(".dropdown-content input[type='checkbox']:checked").each(function() {
            selectedItems.push($(this).next("label").text());
        });
        var buttonText = selectedItems.join(", ");
        if(buttonText === "") {
            buttonText = "选择项";
        }
        $(".dropbtn").text(buttonText);
    });
});

로그인 후 복사

이 JavaScript 코드에서는 옵션을 선택하거나 선택 취소할 때 jQuery의 toggle()方法来切换下拉菜单的显示和隐藏。同时，我们还监听了复选框的change 이벤트를 사용하여 버튼의 텍스트 내용을 자동으로 업데이트합니다.

마지막으로 jQuery 라이브러리를 다운로드하여 소개하고 위의 세 파일을 같은 폴더에 저장해야 합니다.

위의 HTML, CSS 및 jQuery를 결합하면 체크박스가 있는 다중 선택 드롭다운 메뉴를 쉽게 만들 수 있습니다. 이러한 드롭다운 메뉴는 사용자에게 더욱 유연하고 편리한 선택 경험을 제공하고 웹페이지의 상호작용성을 향상시킵니다.

요약: HTML, CSS 및 jQuery의 조합을 통해 다양한 대화형 웹 페이지 요소를 쉽게 만들 수 있습니다. 이에 대한 한 가지 예는 보다 유연하고 지능적인 선택 방법을 제공하는 다중 선택 드롭다운 메뉴입니다. 이 기사의 샘플 코드가 도움이 되기를 바라며 웹 디자인에서 더 나은 대화형 경험을 얻는 데 도움이 되기를 바랍니다.

위 내용은 HTML, CSS 및 jQuery: 체크박스가 있는 다중 선택 드롭다운 메뉴 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!