Я новичок в мире программирования, у меня была бы проблема спросить вас. Я надеюсь, что вы можете мне помочь. У меня проблема на сайте WordPress. Я использую тему, которая создает меню для «мобильной» версии, в которой для открытия меню используется следующая функция:
container.find( '.dropdown-toggle' ).click(
function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
});
Конечно, все прекрасно работает, когда вы нажимаете на объект с классом .dropdown-toggle.
Теперь я хотел бы применить эту функциональность к написанию каждого элемента. Позвольте мне лучше объяснить, как создать подменю в WordPress, который я использую (href = #), это вызывает создание подменю, но когда я нажимаю на ссылку, подменю не открывается. В теме используется маленькая стрелка, чтобы открыть подменю. Я бы хотел, чтобы пользователь щелкнул ссылку href = #, чтобы открыть соответствующее подменю. html для меню имеет тип:
<ul>
<li id="menu-item-2476" class="menu-item" aria-haspopup="true">
<a href="#">menu 1</a>
<button class="dropdown-toggle" aria-expanded="false"></button>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item">
<a href="https://www.myhost.it">sub menu1</a>
</li>
</ul>
</li>
</ul>
после нажатия на элемент .dropdown-toggle в html становится
<ul>
<li id="menu-item-2476" class="menu-item" aria-haspopup="true">
<a href="#">menu 1</a>
<button class="dropdown-toggle toggled-on" aria-expanded="true"></button>
<ul class="sub-menu toggled-on">
<li id="menu-item-435" class="menu-item">
<a href="https://www.myhost.it">sub menu1</a>
</li>
</ul>
</li>
</ul>
Я пытаюсь создать новую функцию, копируя предыдущую, но не могу заставить ее работать, я заменяю .dropdwon-toggle на "#", но ничего, когда нажимаю по ссылке # он не открывается, и документ не заменяет классы css, такие как функция оригинала темы. Кто-то настолько хорош, что ты можешь помочь мне создать эту маленькую функцию? если вам нужно увидеть js темы, это ссылка LINK .
Заранее благодарен за любую помощь.
** ### UPDATE # ## **
спасибо за ответ " stackingjasoncooper " и " Хоанг Чан Сон " для редактирования пост, действительно извините, но это был мой первый пост в этом сообществе, и прежде всего я перевожу с Google ITA> ENG. Я попробовал изменение, но, к сожалению, оно не работает, или, скорее, оно помещает класс ".toggled-on" в тег "a" вместо тега "<ul class="sub-menu>", более того, как только вы нажимаете "* 1034" * "ссылка, надпись внутри исчезает, также вставляется поле aria-expanded="false", которое должно принадлежать" кнопке ". Я потерял его весь день, но безрезультатно, извините за мое невежество. Это html после нажатия на текст меню
<ul><li id="menu-item-2476" class="menu-item" aria-haspopup="true">
<a href="#" class="toggled-on" aria-expanded="false"></a>
<button class="dropdown-toggle" aria-expanded="false"></button>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item">
<a href="https://www.myhost.it">sub menu1</a>
</li>
</ul>
</li>
</ul>
В первом сообщении я не вставил весь скрипт, может быть, есть какая-то проблема в коде до того, как скрипт вставлен в первый пост.
function( $ ) {
var body = $( 'body' ), _window = $( window ), nav, button, menu;
button = $( '.menu-toggle' );
menu = $( '.nav-menu' );
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
container.find( '.page_item_has_children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
// Add menu items with submenus to aria-haspopup="true".
container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );
/* container.find( '.dropdown-toggle' ).click( */
container.find( '.dropdown-toggle, ul:not(.sub-menu) > .menu-item a' ).click(
function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggled-on, ' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
}
);
}
Я ищу руководство jquery и понимаю ( Я надеюсь ), что функция ".next" возвращает следующий соседний тег , Поэтому, если я запускаю в поле «<button>», следующее поле будет «<ul>» ( подменю ). ul на самом деле поле, которое должно получить класс ".toggled-on", чтобы быть открытым. Если то, что я понимаю, верно .... Я должен создать новую функцию, которая включает в себя только поле "a", но дважды (.next), это потому, что поле "подменю" состоит из двух тегов html после. Я также попытался вставить (.next.next), но ничего!
Еще раз спасибо за любой ответ.
- МОЕ РАЗРЕШЕНИЕ
Доброе утро, спасибо Вы все из сообщества. Мне удалось заставить его работать так, как я хотел. Мне пришлось вставить новый скрипт, используя .next() правильно или, по крайней мере, я надеюсь. Как только сценарий был реализован, я понял, что если я нажму href="#", браузер выведет экран вверх, я введу условие, и, похоже, оно работает. Еще раз спасибо всему сообществу!
container.find( '.menu-item a' ).click(
function( e ) {
var _this = $( this );
e.preventDefault();
_this.next().next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.next( '.dropdown-toggle' ).toggleClass( 'toggled-on' );
_this.next().attr( 'aria-expanded', _this.next().attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
if ( _this.attr('href') == "#" ) {}
else{
window.location.href = this;
}
}
);