Изменение функции наведения для переключения функций разрывает ссылки - PullRequest
Новая
       12

Изменение функции наведения для переключения функций разрывает ссылки

0 голосов
/ 27 апреля 2018

У меня есть раскрывающееся меню, в котором в данный момент отображается неупорядоченный раскрывающийся список при наведении, который представляет собой список ссылок. Наведение проблематично для пользователей, и я хочу изменить на «щелкнуть» или «переключить». Вот код в данный момент на сайте: 

 $("#main_nav .dropdown").hover(function() { 
             $('.dropdown-menu', this).fadeIn("fast"); 
             $('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
             $(this).addClass('active');
        },
        function() 
            { $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
            });

если я переключу. Hover на., Переключите раскрывающиеся меню так, как я ожидал. Проблема в том, что теперь он ломает мои ссылки. Когда я нажимаю на них, они ничего не делают и никуда не идут. Вот HTML-код: 

<ul class="nav_main">
        <li class="active"><a href="/#top">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Decisions <b class="caret"></b></a>                      
            <ul class="dropdown-menu mega-menu" id="decisions">
                <li class="mega-menu-column">
                    <ul>
                        <span>
                            <li><a href="https://www.canlii.org/en/sk/skca/">Our Decision on CanLII</a></li>
                            <li><a href="https://scc-csc.lexum.com/scc-csc/en/nav.do">SCC Decisions</a></li>
                            <li><a href="https://scc-csc.lexum.com/scc-csc/scr/en/nav_date.do">Canada Supreme Court Reports (PDF)</a></li>
                            <li><a href="https://app.vlex.com">vLex Canada Open</a></li>
                            <li><a href="https://library.lawsociety.sk.ca/databasespub/digest2008.htm">Sask Cases Judicially Considered</a></li>
                        </span>
                        <span>
                            <li><a href="https://decisions.fct-cf.gc.ca/fc-cf/en/nav.do">Federal Court</a></li>
                            <li><a href="http://soquij.qc.ca/fr/services-aux-citoyens/english-translation">Quebec (translated decisions)</a></li>
                            <li><a href="https://decision.tcc-cci.gc.ca/tcc-cci/en/nav.do">Tax Court of Canada</a></li>
                        </span>
                        <span>
                            <li class="list-heading">Tribunals</li>
                            <li><a href="https://www.canlii.org/en/sk/skaia/">Automobile Injury Appeal Commission</a></li>
                            <li><a href="https://www.canlii.org/en/sk/sklss/">Law Society of Saskatchewan</a></li>
                            <li><a href="https://www.canlii.org/en/sk/skla/">Labour Arbitration Awards – Sask</a></li>
                            <li><a href="https://www.canlii.org/en/sk/sklrb/">Sask LRB (CanLII)</a></li>
                            <li><a href="http://www.sasklabourrelationsboard.com/Decisions-Reasons">Sask LRB</a></li>
                        </span>
                    </ul>
                </li>
            </ul>

Есть ли какая-либо легко объяснимая причина, по которой мой простой переход в коде приводит к тому, что ссылки перестают работать полностью?

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Полагаю, ваш .toggle захватывает событие click для всего контейнера. Поэтому, когда вы нажимаете на ссылку, она переключает меню, а не запускает щелчок по умолчанию для ссылки. Вы можете попробовать остановить распространение по ссылкам, чтобы оно не вызывало событие click в родительском меню: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

0 голосов
/ 27 апреля 2018

Мне не удалось точно воспроизвести проблему с предоставленным вами кодом, но я столкнулся с проблемами, щелкая некоторые ссылки.

Удаление недействительных элементов span из ul, похоже, исправило обнаруженную проблему.

Попробуйте удалить эти span теги из ul.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Допустимые дочерние элементы ul

...