Nav отображает только <a>, а не <button>в мобильном представлении, как мне настроить JS для поддержки кнопок? - PullRequest
Новая
       11

Nav отображает только <a>, а не <button>в мобильном представлении, как мне настроить JS для поддержки кнопок?

0 голосов
/ 24 мая 2019

Я использую бесплатный шаблон, который изначально не использовал платформу Bootstrap.У меня изначально была ссылка в навигационной панели, но модал не отображался.Изменив его на кнопку, он начал работать отлично.

Я заметил, что в мобильном представлении, когда меню гамбургера расширено ... он показывает только все элементы в.

Послепросматривая js, мне не удалось включить поддержку кнопки.Сначала я попытался переключиться, но кнопка обратно на якорь, но столкнулся с моими первоначальными ошибками, когда модальное не будет отображаться.После включения некоторых js, чтобы он вызывал отображение ... Я обнаружил, что он будет раздет в мобильном телефоне.

Возвращаясь к исходной точке, я переключился обратно и попытался добавить его в часть JS, но получал ошибки.

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

. 
                    <nav id="nav">
                        <ul>
                            <li>
                                <a href="#" class="dropdown-toggle">First Item</i></a>
                                <ul>
                                    <li><a href="#">Sub 1</a></li>
                                    <li><a href="#">Sub 2</a></li>
                                </ul>
                            </li>
                            <li><a href="#" target="_blank">Second Item</a></li>
                            <li><a href="#" target="_blank">Third Item</a></li>
                            <li><button data-target="#exampleModal" data-toggle="modal" role="button" class="button" href="#exampleModal"><span style="font-size:50px;">My Button</span></button></li>
                        </ul>
                    </nav>

// Panel.
            $(
                '<div id="navPanel">' +
                    '<nav>' +
                        $('#nav').navList() +
                    '</nav>' +
                '</div>'
            )
                .appendTo($body)
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'left',
                    target: $body,
                    visibleClass: 'navPanel-visible'
                });

$.fn.navList = function() {

        var $this = $(this);
            $a = $this.find('a'),
            b = [];

        $a.each(function() {

            var $this = $(this),
                indent = Math.max(0, $this.parents('li').length - 1),
                href = $this.attr('href'),
                target = $this.attr('target');

            b.push(
                '<a ' +
                    'class="link depth-' + indent + '"' +
                    ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
                    ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
                '>' +
                    '<span class="indent-' + indent + '"></span>' +
                    $this.text() +
                '</a>'
            );

        });

        return b.join('');

    };

Я ожидаю, что кнопка будет отображаться в мобильной навигации, даже если это просто текст, который при нажатии / нажатии... он все равно запустит модал.Для этого не нужно иметь класс кнопки.

Заранее благодарим вас за любые предложения о том, как это изменить.

...