使用粘性滾動菜單鏈接打開手風琴菜單項

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