#javascript #jquery
#javascript #jquery
Вопрос:
Я работаю над свертыванием и расширением функциональности с помощью Jquery в моем левом меню.
Здесь, когда пользователь нажимает «Родительский», хотелось бы показать «Администратор» и «Учетная запись» с тегом привязки с URL. До этого момента он работал нормально.
Если пользователь нажимает на «Admin», он сворачивается и показывает корневой элемент «Parent».
Как сохранить структуру здесь.
$(document).ready(function() {
$('ul.child').hide();
$('li:has(.child)').click(function() {
$('ul',this).toggle('slow');
});
$('li').click(function(event) {
event.stopPropagation();
});
<nav id="nav">
<ul>
<li>
<a>Parent</a>
<ul class-"child">
<li class="child"><a href="/Home/Admin">Admin</a></li>
<li class="child"><a href="/Home/Account">Account</a></li>
</ul>
</li>
</ul>
</nav>
Без тега привязки он будет работать нормально, но когда я включаю тег привязки с URL, событие «stopPropagation» через li завершится неудачей. Это приводит к свертыванию до корневого элемента.
Если пользователь нажмет на Admin, он рухнет в корень как
.Parent
что нужно сделать, чтобы сохранить структуру, как показано ниже
.Parent
.Admin
.Account
Ответ №1:
Насколько я понимаю, вы нажимаете «Администратор» или «Учетная запись», она перенаправит на соответствующую страницу и в то время, когда вы хотите открыть иерархию, в которой она находится.
В этом случае вы можете сравнить текущий URL-адрес с каждым тегом a в иерархии и сравнить URL-адрес. window.location.pathname может использоваться для получения пути, который вы хотите сравнить, и каждого для перебора тегов A. Дайте мне знать, если вы все еще сомневаетесь в этом.
Комментарии:
1. Да, я хочу отобразить левую иерархию, в которой она находится. Ссылка на код была бы большой помощью
2.
var currentURL = window.location.pathname; $('#nav .child li').each(function(){ var aHref = $(this).find('a').attr('href'); if( aHref == currentURL ) { $(this).closest('ul.child').show(); } });Дайте мне знать, если вы ничего не получите.3. Если это полезно для вас, голосование было бы действительно полезным 🙂
4. Код сам будет отображать родительский элемент при загрузке, если дочерний элемент не был посещен. Для вашего текущего примера в настоящее время посещается ит-администратор, он также покажет дочерние элементы как внутренние. В противном случае будет отображаться только родительский элемент.
5. Он удерживает левый раздел и перенаправляет соответствующую страницу в правый раздел. но я не вижу здесь эффекта переключения. поправьте меня, если я ошибаюсь
Ответ №2:
Попробуйте что-то вроде
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Вот страница об этом в документации jQuery:
Ответ №3:
$(document).ready(function() {
$('ul.child').hide();
$('.parent').click(function() {
$('ul.child',this.parent).toggle('slow');
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul>
<li>
<a class="parent">Parent</a>
<ul class="child">
<li><a href="#/Home/Admin">Admin</a></li>
<li><a href="#/Home/Account">Account</a></li>
</ul>
</li>
</ul>
</nav> Это должно сработать. Ваша проблема в том, что когда вы нажимаете на li, вы нажимали на родительский li раньше.
Комментарии:
1. Он перемещается, но левое меню сворачивается до основания. Когда я нажимаю на Admin, в левом меню отображается только родительский элемент, а в правом — страница Home / Admin. Я хочу удерживать левый раздел — Родительский — Администратор
2. Это потому, что ваш браузер перенаправляет
#/Home/Adminваш URL-адрес3. Он работает не так, как требуется. После нажатия кнопки «Admin» правый раздел переходит, но в левом разделе отображается только «Родительский».
4. Я обновил фрагмент, некоторые ошибки от меня, извините. Можете ли вы повторить попытку с этим?
5. Правый раздел не загружается с соответствующей страницей. Если пользователь нажимает «Admin», я хотел бы загрузить правый раздел с помощью «/ Home / Admin».
Ответ №4:
Что ж, ниже приведен рабочий код для этого.
$(document).ready(function() {
$('ul.child').hide();
$('li:has(.child)').click(function() {
$('ul',this).toggle('slow');
});
$('li').click(function(event) {
event.stopPropagation();
});
}); a{
color: blue;
text-decoration: none;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul>
<li>
<a>Parent</a>
<ul class="child">
<li class="child"><a href="/Home/Admin">Admin</a></li>
<li class="child"><a href="/Home/Account">Account</a></li>
</ul>
</li>
</ul>
</nav> Надеюсь, это вам поможет 🙂
Комментарии:
1. Левое меню не содержит своей структуры. Он сворачивается до основания.
2. вы хотите оставить его открытым.. я имею в виду родителей и дочерних элементов по умолчанию?
3. При открытии страницы я хочу показать только корневой элемент, который является «родительским». При нажатии на «Родительский» хотелось бы отобразить «Администратор» и «Учетная запись». Теперь, если пользователь нажмет на «Admin», то в левом меню должна содержаться структура как есть, а правый раздел должен перемещаться.
4. что означает правильный раздел? вы хотите, чтобы мы добавили новый контейнер и отображали в нем содержимое администратора и учетной записи. между тем родительский дочерний элемент останется таким, как он .. правильно?
5. У меня есть два раздела на странице — слева находится меню, а в правом разделе будет отображаться выбранная страница из левого раздела. Когда пользователь нажимает на дочерний элемент — «Admin», в правом разделе отображается соответствующая страница, но левый раздел переключается на корневой элемент и показывает только «Родительский»