编写JQuery来改变Drupal 7的TB Megamenu的行为

Writing JQuery to change behavior of TB Megamenu for Drupal 7

本文关键字：TB Megamenu JQuery 改变 Drupal 编写      更新时间：2023-09-26

我是Javascript和JQuery的新手，我遇到了让行为像我想的那样工作的问题。我目前有两个下拉TB MegaMenus在我的网站的顶部，而它是在980px下面。问题是，由于它们是独立的菜单，当您打开一个菜单并单击打开第二个菜单时，第一个菜单不会关闭。我试图让他们关闭另一个当他们打开。它们通过将溢出从隐藏更改为可见来操作。.nav-collapse是两个div上的类，一旦打开另一个div就需要隐藏。我明白，我们需要改变css溢出:隐藏，但我没有做得很好，甚至在查找了许多例子后也遇到了麻烦。如有任何帮助，不胜感激。

DOM看起来像这样。

。l-region> #block- tg -megamenu-main-menu> .block__content> . tg -megamenu-main-menu> .nav-collapse(这是需要CSS修改为overflow: hidden的)

文档

$()时()函数{

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

所以我想好了我需要做什么。我必须将第一行添加到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'});
    }
  });
相关文章：