编写 JQuery 以更改 Drupal 7 的 TB Megamenu 的行为答案

【问题标题】：Writing JQuery to change behavior of TB Megamenu for Drupal 7编写 JQuery 以更改 Drupal 7 的 TB Megamenu 的行为
【发布时间】：2014-08-07 18:54:38
【问题描述】：

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

DOM 看起来像这样。

.l-region > #block-tb-megamenu-main-menu > .block__content > .tb-megamenu-main-menu > .nav-collapse（这是需要修改CSS溢出的：隐藏）

$(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 中执行功能的代码。是否可以只修改此代码？

附加：函数（上下文）{

  $('.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'});
    }
  });

【问题讨论】：

标签： javascript jquery html css drupal

【解决方案1】：

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

附加：函数（上下文）{

  $('.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'});
    }
  });

【讨论】：