05/05/20
Я создал меню в Bootstrap, которое выглядит так:
Первоначально морковка рядом с «Веб-обучение» была обращена вниз, как на верхнем уровне «Услуги». И 3 пункта в разделе «Веб-обучение» появятся в нижней части меню. Я хотел, чтобы он оказался справа. Я обнаружил, что если вы используете ".dropright" рядом с ".dropdown", вы получите такой эффект. Мне пришлось изменить структуру моей панели NavBar, но в итоге я получил следующее:
<nav class="navbar navbar-expand-lg navbar-light bg-white"
style="border: 0px solid red;">
<a class="navbar-brand header-logo-link" asp-controller="Home" asp-action="Index">About CTAS</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link"
asp-controller="Creativity"
asp-action="Index">
Creativity
</a>
</li>
<li class="nav-item">
<a class="nav-link"
asp-controller="Thinking"
asp-action="Index">
Thinking
</a>
</li>
<li class="nav-item">
<a class="nav-link"
asp-controller="Solutions"
asp-action="Index">
Solutions
</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" style="cursor:pointer"
id="navbarServicesDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarServicesDropdown">
<a class="dropdown-item"
asp-controller="Services"
asp-action="Overview">Services Overview</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
asp-controller="Services"
asp-action="WebDesign">Web Design</a>
<a class="dropdown-item"
asp-controller="Services"
asp-action="WebArchitecture">Web Architecture</a>
<a class="dropdown-item"
asp-controller="Services"
asp-action="DatabaseDesign">Database Design</a>
<div class="dropdown-divider"></div>
<div class="dropdown dropright" id="WebTutoringDropdown">
<!-- Dropdown button link -->
<a class="dropdown-item dropdown-toggle"
style="cursor:pointer; color:brown !important;"
id="navbarWebTutoringDropdown"
role="button"
data-toggle="dropdown"
@*data-target="#webTutoringMenu"*@
aria-haspopup="true"
aria-expanded="false"
onclick="toggleWebTutoringSubMenu(event);">
Web Tutoring
</a>
<div class="dropdown-menu" id="webTutoringMenu"
aria-labelledby="navbarWebTutoringDropdown">
<a class="dropdown-item" style="color:brown !important"
asp-controller="Services"
asp-action="Tutoring">At a glance</a>
<a class="dropdown-item" style="color:brown !important"
asp-controller="Services"
asp-action="Tutoring">Beginning Web Development</a>
<a class="dropdown-item" style="color:brown !important"
asp-controller="Services"
asp-action="Tutoring">Int/Advanced Web Development</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
asp-controller="Pricing"
asp-action="Index">
Pricing
</a>
</li>
<div class="dropdown-divider"></div>
@*<li class="nav-item">
<a class="nav-link"
asp-controller="Portfolio"
asp-action="Index">
Portfolio
</a>
</li>
<div class="dropdown-divider"></div>*@
<li class="nav-item">
<a class="nav-link"
asp-controller="Contact"
asp-action="Index">
Contact Us
</a>
</li>
</ul>
</div>
И я был счастлив, наконец, добраться до него, где я мог нажать на «Веб-обучение "и переместите подменю вправо и получите визуальный эффект, который я искал. Но сейчас у меня с этим возникают всевозможные проблемы.
Если бы я нажал на «Веб-обучение», подэлементы отобразились бы, но если бы я щелкнул по нему снова, либо подэлементы не были go прочь, либо меню «Кто» закроет не только пункты подменю. Я занимаюсь этим уже несколько часов, поэтому я не могу сказать вам, какой именно код вызвал каждую проблему.
Так что я просто не мог добиться естественного поведения Bootstrap, чтобы открывать и закрывать только подэлементы при нажатии на «Веб-обучение», поэтому я начал пытаться вызвать .dropdown () и .collapse ('hide'); непосредственно в подменю.
Итак, я добавил сайт. js и поместил туда эту функцию вместе с глобальной переменной, пытающейся отслеживать, развернуто или свернуто подменю:
var webTutoringSubMenuOn = false;
console.log(`webTutoringSubMenuOn: ${webTutoringSubMenuOn}`);
function toggleWebTutoringSubMenu(ev) {
if (webTutoringSubMenuOn) {
$('#webTutoringMenu').collapse('hide');
webTutoringSubMenuOn = false;
ev.stopPropagation();
} else {
$('#WebTutoringDropdown').dropdown();
webTutoringSubMenuOn = true;
// ev.stopPropagation();
}
console.log(`webTutoringSubMenuOn: ${webTutoringSubMenuOn}`);
}
И подключил вызов к
toggleWebTutoringSubMenu (ev)
в пункте меню «Веб-обучение».
И у меня возникла эта проблема, когда я нажал «Веб-обучение» "и он показывает элементы, я щелкаю по нему еще раз, и все меню исчезает. Но если я go перехожу в консоль JavaScript и набираю вручную:
$('#webTutoringMenu').collapse('hide');
, это работает! Подэлементы go удалены, а меню остается видимым.
Итак, теперь я попал в event.StopPropagation. и казалось, что он работал минуту. Но это не так. это поведение, насколько я могу описать.
1) Нажмите на услуги 2) Нажмите «Веб-обучение», и появятся подпункты. 3) Щелкните еще раз, они исчезнут, пока все хорошо. 4) Щелкните еще раз, и все меню исчезнет.
Консоль javascript дает мне правильные сообщения: webTutoringSubMenuOn: false site. js: 15 webTutoringSubMenuOn: true site. js: 15 webTutoringSubMenuOn: false 5) Щелкните службы еще раз, и появится все меню с развернутыми элементами подменю веб-обучения!?! 6) Щелкните еще раз, и они исчезнут. 7) Нажмите еще раз, они снова появятся 8) Нажмите еще раз, они исчезнут 9) Щелкните еще раз, и все меню исчезнет. site. js: 15 webTutoringSubMenuOn: true
Довольно стабильно, пропадает при каждом четвертом клике. И когда вы снова нажимаете службы, появляется подменю с расширенным подменю.
Две другие проблемы, которые у меня возникают: 1) После второго щелчка по подменю, щелчок «Службы» не закрывает все меню и не закроет его до тех пор, пока не перейдет к первому щелчку. Это означает, что вы нажимаете «Веб-обучение» количество раз за цикл, как описано выше. 2) Также перестали работать ссылки для пунктов подменю 2-го уровня. По крайней мере, для той, которую я подключил: «Краткий обзор».
Достаточно ли умен, чтобы увидеть, что здесь происходит? Я в недоумении. Я скучаю по дням, когда я мог сделать это меню в Fireworks за 10 минут. Я был здесь более 4 с половиной часов.
Обновление 05/06/20
Хорошо, здесь я работаю над одной проблемой за раз. Первое, над чем я работаю, это то, что при каждом третьем щелчке по раскрывающейся ссылке «Веб-службы>» меню «Службы>» закрывается. Когда я снова нажимаю на «Службы>», раскрывающееся меню «Службы» снова становится видимым, а раскрывающееся меню «Веб-обучение» находится в том же состоянии, в котором оно было оставлено, - «Расширено».
Странно, что закрывать родительский раскрывающийся список каждый третий щелчок?
