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

Question

我有一个手风琴菜单和粘性滚动链接，它们单独工作绝对正常。

我现在需要做的是将滚动菜单链接到手风琴，以便在单击手风琴菜单和粘性滚动菜单时打开手风琴选项卡。

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

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

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

这是我的代码

$(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

Answer 1

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

  //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>

您可以在渲染逻辑中动态创建这些属性。

DEMO

另一种方法是使用菜单项的index，意思是找到你正在点击的菜单的nth编号，并触发点击具有相同nth编号的手风琴菜单项

使用href-id链接DEMO，在渲染逻辑中动态创建id