带有命名锚点的 jQuery UI 手风琴,不切换菜单选择

发布于 2024-08-26 18:01:18 字数 1554 浏览 1 评论 0原文

使用带有菜单项命名锚点目标的 jQuery UI 手风琴菜单(导航:true),即菜单项引用当前页面上的命名锚点。

如果导航,手风琴可以很好地突出显示单击的菜单项到不同的页面,但如果菜单项引用当前页面上的命名锚点,则单击时不会更改菜单选择/突出显示(尽管该链接会导致页面按预期滚动到正确的锚点)。位置哈希随锚点更新,但单击的菜单项未突出显示。

除此之外不做任何花哨的事情。下面是演示该问题的示例手风琴菜单。单击任何菜单项时,手风琴不会突出显示该菜单项以反映它是当前菜单项。

我希望它在单击时突出显示菜单项,并期望手风琴以这种方式工作。我怎样才能做到这一点?

手风琴小部件是否仅设计用于当手风琴在页面加载时初始化时通过 URL 哈希更新/查找/突出显示当前菜单项?

仅供参考,我对这一切都很陌生。温柔一点;) TIA

<ul id="navigation">
  <li>
  <a class="head">Menu 1</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li> 
    </ul>
  </li>
  <li>
    <a class="head">Menu 2</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li>
    </ul>
  </li>
</ul>

[于 2010 年 11 月 17 日添加] 我的库或手风琴初始化代码中没有什么特别的:

jquery-1.4.2.min.js
chili-1.7.pack.js
jquery.easing.js
jquery.dimensions.js
jquery.accordion.js

jQuery().ready(function(){
    $('#navigation').accordion({
        collapsible: true,
        active: 0,
        header: '.head',
        navigation: true,
        autoheight: true,
        animated: 'easeslide'
    });
 });

这一切都与手风琴库如何处理命名锚点有关。

Using a jQuery UI accordion menu (navigation: true) with named anchor targets for the menu items, i.e. menu items refer to named anchors on the current page.

Accordion works fine with highlighting a clicked menu item if navigating to a different page, but if the menu item refers to a named anchor on the current page it does not change the menu selection/highlight upon clicking (though the link causes the page to scroll to the correct anchor as expected). The location hash is updated with the anchor, but the clicked menu item is not highlighted.

Not doing anything fancy otherwise. Below is a sample accordion menu that demonstrates the problem. When any of the menu items are clicked on, the accordion does not highlight that menu item to reflect that it is the current menu item.

I want it to highlight the menu item when it is clicked and expected accordion to work that way. How can I make it do that?

Is the accordion widget only designed to update/find/highlight the current menu item via the URL hash when accordion initializes on page load?

FYI I'm new to all this. Be gentle ;)
TIA

<ul id="navigation">
  <li>
  <a class="head">Menu 1</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li> 
    </ul>
  </li>
  <li>
    <a class="head">Menu 2</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li>
    </ul>
  </li>
</ul>

[Added 11-17-2010]
Nothing special in my libs or the accordion init code:

jquery-1.4.2.min.js
chili-1.7.pack.js
jquery.easing.js
jquery.dimensions.js
jquery.accordion.js

jQuery().ready(function(){
    $('#navigation').accordion({
        collapsible: true,
        active: 0,
        header: '.head',
        navigation: true,
        autoheight: true,
        animated: 'easeslide'
    });
 });

It all has to do with how the accordion lib treats named anchors.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文