如何在一个javascript切换中包含多个div？

Question

我正在尝试为我的“小”或移动版本的响应式网站实现javascript切换效果。我正在使用自己的自定义WordPress主题。

我正在尝试使用本文中的脚本：http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1

棘手的部分是我试图包含几个div，而不仅仅是一个导航。如果您现在查看该网站（仍在建设中），请访问：

http://66.147.244.81/~assureva/

并将浏览器窗口缩小到比540px更窄，你会看到我设法得到我的顶级导航栏（smallnav），2个“登录”链接，以及facebook和LinkedIn图标，全部消失，并重新按下现在出现在徽标右侧顶部的“主菜单”按钮时出现。但我似乎无法在最后一部分添加，这是构成主要“nav”的4个链接。我把整个区域包裹在一个div（mobimenubg）中，但是主导航栏的行为就像它不在那个div中，但是“smallnav”，“logins”和“socialcons”divs在“mobimenubg”中按照需要组合“div。

如果我继续将“navbar”div设置为“display：none”，它将消失但当我点击“主菜单”按钮时它不会再出现。

所以我想答案要求javascript包含“mobimenubg”div和“navbar”div（“navbar div是包含实际”nav“的容器）但是我不知道怎么写得好。

这是javascript：

<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
    $("#mobimenubg").slideToggle();
    $(this).toggleClass("active");
}); 
    }); 
   </script>

有人能告诉我如何添加导航栏div吗？我之后是否添加了另一行：

$("#mobimenubg").slideToggle();

或者我可以将它包含在parens中：

$("#mobimenubg" IN HERE?).slideToggle();

我不知道惯例 -

非常感谢!!

Answer 1

  

我把整个区域包裹在一个div（mobimenubg）中，但是主导航栏的行为就像它不在那个div中一样，

您实际上拥有正确的代码，但您的HTML结构已关闭。导航栏div不包含在mobimenubg div中，这就是问题所在。只需确保在那里嵌套导航栏，否则我认为您也可以在导航栏上调用该函数，如：

$("#navbar").slideToggle();