Question

我找到了一个库https://github.com/grubersjoe/slide-menu，除了我想要改变的一件事之外，它正在寻找我正在寻找的行为。

当用户点击有孩子的li时，隐藏其他部分以允许用户通过。该库添加了一个箭头，让用户知道有子元素。

我想要做的改变是让父文本独立于箭头。因此，箭头将用于钻取，父文本单击将执行其他操作。

通过图书馆，我看到了这一部分：

_setupSubmenus() {
            this._anchors.each((i, anchor) => {
                anchor = $(anchor);
                if (anchor.next('ul').length) {
                    // prevent default behaviour (use link just to navigate)
                    anchor.click(function (ev) {
                        ev.preventDefault();
                    });

                    // add `before` and `after` text
                    let anchorTitle = anchor.text();
                    anchor.html(this.options.submenuLinkBefore + anchorTitle + this.options.submenuLinkAfter);
                    // add a back button
                    if (this.options.showBackLink) {
                        let backLink = $('<a href class="slide-menu-control" data-action="back">' + anchorTitle + '</a>');
                        backLink.html(this.options.backLinkBefore + backLink.text() + this.options.backLinkAfter);
                        anchor.next('ul').prepend($('<li>').append(backLink));
                      
                    }
                }
            });
        }

我添加了这一行

anchor.next('ul').before('<a class="gotToChildren" href="#"> > </a>');

将submenuLinkAfter: ' ⇒'更改为submenuLinkAfter: ''

后

然后行为不起作用。

任何人都知道如何实现我的目标？

Answer 1

在菜单上，我在父a标记旁边添加了span标记，如下所示：

<a href="http://google.de">News</a><span></span>

submenuLinkAfter: ' >',可以包含任何内容，包括HTML代码

然后在图书馆

我将this._anchors = this._menu.find('a');更改为this._anchors = this._menu.find('span');

同样在_setupEventHandlers() {我改变了这一行：

let anchor = $(event.target).is('a') ? $(event.target) : $(event.target).parents('a:first');

到

let anchor = $(event.target).is('span') ? $(event.target) : $(event.target).parents('span:first');

因此span标签充当钻井元素

还通过更改此行来更改要从a标记抓取的父标题：

let anchorTitle = anchor.text();

到

let anchorTitle = anchor.prev('a').text();

ul菜单深入更改库

1 个答案: