JQuery проблема складного меню - PullRequest
Новая
       0

JQuery проблема складного меню

0 голосов
/ 11 апреля 2020

Я использую складное меню JQuery для своего приложения. Я использую 4 складных области в моем приложении. Здесь я показываю только один раздел. Как сделать так, чтобы этот пример отображался для 4 областей моего приложения? Что я могу сделать, чтобы изменить свой код для нескольких областей?

Ниже приведен пример. https://jsbin.com/ciloliweto/

Как я могу изменить это, чтобы сделать более одной складной области?

Ниже приведено несколько разборных (две секции) 

 <div class="panel-group driving-license-settings" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox">
                <label data-target="#collapseOne">
                    <input type="checkbox"/> Header 01 
                </label>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                    Content 1

                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-group driving-license-settings" id="accordion2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox2">
                <label data-target="#collapseTwo">
                    <input type="checkbox"/> Header 02
                </label>
            </div>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                     Content 2
                </div>
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

2 голосов
/ 11 апреля 2020

Если я правильно понял ваш вопрос, то вы можете использовать просто .parents () в сочетании с .find () , чтобы выбрать складывающиеся элементы рядом с вашим входом, Обратите внимание, что я добавил разные идентификаторы для panels и <input>, вот рабочий фрагмент: 

$('.collapse').collapse();

$("[type='checkbox']").bind('click dblclick', function(evt) {
    if ($(this).is(":checked")) {
        $(this).parents('.panel-group').find('.collapse').slideDown('fast');
    } else {
        $(this).parents('.panel-group').find('.collapse').slideUp('fast');
    }
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>

<body>

    <div class="panel-group driving-license-settings" id="accordion0">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group driving-license-settings" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox1">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group driving-license-settings" id="accordion2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox2">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
        
    </script>

</body>

</html>
0 голосов
/ 11 апреля 2020

Насколько я понимаю ваш запрос, вам нужно показать это складное меню либо на 4 разных страницах, либо в 4 разных местах на одной странице.

Если это так, то вы можете сделать это очень простым способом. Что вы можете сделать, так это то, что вы можете назначить 4 разных идентификатора или класса для всех ваших 4 разных меню и, используя один и тот же код jquery, вы можете выбрать класс и идентификаторы с помощью селектора "$", используя "command".

например, $ ('. Collapse, .collapse2, .collapse3, .collapse4'). Collapse (); 

    $("#testCheckBox :checkbox, #testCheckBox2 :checkbox").bind('click 
       dblclick', function(evt) {
        console.log(evt.type);
        if ($(this).is(":checked")) {
            $('.collapse').slideDown('fast');
        } else {
            $('.collapse').slideUp('fast');
        }
    })

Но так как ваш вопрос недостаточно детально проработан, я не могу дать вам точное решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...