Изменить мобильную навигацию, открыв действие, нажав на ссылку, а не значок - PullRequest
Новая
       21

Изменить мобильную навигацию, открыв действие, нажав на ссылку, а не значок

0 голосов
/ 26 июня 2018

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

Проблема с мобильной навигацией. Ссылки с подменю можно открыть, только нажав на значок справа от ссылки (значок ССЫЛКА). Нажатие на саму ссылку не открывает подменю. Значок такой уродливый (даже когда я изменил fontello для шрифта awesome) и смещает ссылку от центра. Плюс это такая маленькая область, на которую можно нажать. Я проверил это с несколькими друзьями, и они попытались нажать на ссылки, прежде чем обнаружили, что им нужно нажать на значок.

Я пытался редактировать код JS, но, поскольку я не эксперт, это не сработало. Я даже пытался использовать display: none для скрытия / отображения на одном из элементов li с помощью медиа-запросов; но это работает только для одной ссылки.

Мобильная навигация расположена вертикально и по центру.

Ниже приведен код JS. 

var $menu = $('.nav-menu', '#primary-navigation');

// add classes
$menu.find('li').each(function() {
    if($(this).children('ul').length) {
        $(this).addClass('has-submenu');
        $(this).find('>a').after('<span class="submenu-toggle"></span>');
    }
});

var $submenuTrigger = $('.has-submenu > .submenu-toggle');
// submenu link click event
$submenuTrigger.on( "click", function() {
    $(this).parent().toggleClass('active');
    $(this).siblings('ul').toggleClass('active');
});

А вот и HTML 

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> 

<a class="menu-toggle"><span class="lines"></span></a>

    <div class="nav-menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#" class="selected">Explore</a>
                <ul>
                    <li><a href="ex_languages.html">Languages</a></li>
                    <li><a href="ex_gallery.html">Gallery</a></li>
                    <li><a href="ex_glossary.html">Glossary</a></li>
                </ul>
            </li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="ab_about.html">About</a></li>
                    <li><a href="ab_faq.html">Questions &amp; Answers</a></li>
                </ul>                            
            </li>
            <li><a href="blog/index.php">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</div>

Вот КСС 

.submenu-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    color:#fff; 
    font-size: 15px; 
    font-weight: 900; 
    display: inline-block; 
    width: 26px; 
    line-height: 24px; 
    text-align: center;
    margin-left: -8px; 
    margin-bottom: 8px;
    cursor:pointer;
}
.active > .submenu-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d8";
}

Если кто-то может помочь, это было бы здорово. Это нормально, если и ссылка, и значок кликабельны, но наиболее важным является наличие кликабельной ссылки или наличие области щелчка значка, простирающейся над ссылкой.

Спасибо:)

1 Ответ

0 голосов
/ 26 июня 2018

Вы правы - Bootstrap 3 не поддерживает подменю в мобильной навигации. Вот почему вы должны справиться с этим самостоятельно.

Следуя вашей логике, триггер должен быть: 

var $submenuTrigger = $('.has-submenu > .submenu-toggle, .has-submenu > a');

Также нужно добавить небольшой хак: 

$('.nav-menu > ul').on('click', function(event) {
    event.stopPropagation();
});

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

...