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

打开带有粘性滚动菜单链接的手风琴菜单项

1 个答案: