使用粘性滚动菜单链接打开手风琴式菜单项

Open accordion menu items with sticky scroll menu links

本文关键字：手风琴 菜单项 链接 菜单 滚动      更新时间：2024-01-31

我有一个手风琴菜单和粘性滚动链接，它们单独运行非常好。

我现在需要做的是将滚动菜单链接到手风琴，这样当点击手风琴菜单和粘性滚动菜单时，它就会打开手风琴选项卡。

我需要制作手风琴菜单，以便在用户点击滚动菜单项时打开。

如何将切换功能动态链接到粘性滚动菜单？

我还没有为这两个使用任何插件，所以请建议我不要使用插件。非常感谢。

这是我的代码

$(document).ready(function () {  
  //Sticky scroll menu
  var top = $('.sticky-scroll-box').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
        if (y >= top) {
          $('.sticky-scroll-box').addClass('fixed');
        } else {
          $('.sticky-scroll-box').removeClass('fixed');
        }
        $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width());
    });
    //Accordion
    $(".menu_body").hide();
    //toggle the componenet with class menu_body
    $(".menu_head").click(function(){
        $(this).next(".menu_body").slideToggle(400); 
        var plusmin;
        plusmin = $(this).children(".plusminus").text();
        $(this).children("span.down-arrow").toggleClass("up-arrow");        
    });
});

DEMO

使用任何属性值在粘性菜单和手风琴菜单之间使用链接

  //toggle the componenet with sticky menu
  $('.sticky-scroll-box a').click(function(){
    var menuRef = $(this).attr('toggelink');    
    $(".menu_head").filter("[toggelink^='"+menuRef+"']").click();    
  });
});

并更改类似的html

<a toggelink="menu_1" class="menu_head"> Menu 1</a>

对于粘性菜单

<a toggelink="menu_1"  href="#">Menu 1</a>

这些属性可以在渲染逻辑中创建dynamicaly。

演示

另一种方法是采用菜单项的index，即找到您在棒中单击的菜单的nth编号，并触发具有相同nth编号的手风琴菜单项的单击

使用href id链接DEMO，在呈现逻辑

中动态创建id
相关文章：