javascript - 编写 JQuery 以更改 Drupal 7 的 TB Megamenu 行为

Question

我对 Javascript 和 JQuery 非常陌生，但在让行为按我希望的方式工作时遇到了问题。我目前在我的网站顶部有两个下拉式 TB MegaMenus，但它低于 980px。问题在于，由于它们是单独的菜单，当您打开一个菜单并单击以打开第二个菜单时，第一个菜单不会关闭。我试图让它们在打开时关闭另一个。它们通过将溢出从隐藏变为可见来进行操作。 .nav-collapse 是两个 div 上的类，一旦打开另一个，就需要隐藏它。我知道我们需要将 css 更改为 overflow: hidden，但我做得不正确，即使在查找了许多示例后也遇到了麻烦。任何帮助将不胜感激。

DOM 看起来像这样。

.l-region > #block-tb-megamenu-main-menu > .block__content > .tb-megamenu-main-menu > .nav-collapse (this is the one that needs the CSS modified to overflow: hidden)

---

$(document).ready(function(){

$("#block-tb-megamenu-main-menu").on('click', '.nav-collapse', function(){
    $('#block-tb-megamenu-menu-connect').find(".nav-collapse").css({"overflow":"hidden"});
});

这是在 TB Mega Menu 中执行功能的代码。是否可以仅修改此代码？

attach: function(context) {

  $('.tb-megamenu-button').click(function() {
    if(parseInt($(this).parent().children('.nav-collapse').height())) {
      $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
    }
    else {
      $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'});
    }
  });

Answer 1

所以我想出了我需要做什么。我必须将第一行添加到 else 语句，这将关闭具有 .nav-collapse 类的所有内容，然后打开相应的。

attach: function(context) {

  $('.tb-megamenu-button').click(function() {
    if(parseInt($(this).parent().children('.nav-collapse').height())) {
      $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
    }
    else {
           /*line that I put in to allow for other menus to close when one is clicked.*/
      $('.nav-collapse').css({height: 0, overflow: 'hidden'});
      $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'});
    }
  });