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

Question

这个问题是从WordPress开发Stack Exchange迁移而来的，因为可以在Stack Overflow上回答。 迁移 7年前 。 了解更多 。

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

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

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

http://66.147.244.81/~assureva/

并将浏览器窗口缩小到小于540像素，您会看到我设法获得了我的顶部导航栏（smallnav），2个“登录”链接以及facebook和LinkedIn图标，所有这些都消失了，并在按下时重新出现现在出现在徽标右侧的顶部的“主菜单”按钮。 但是我似乎无法在最后一部分中添加，它是构成主要“导航”的4个链接。 我已经将整个区域包裹在一个div（mobimenubg）中，但是主要的导航栏的行为就像不在该div中一样，但是“ smallnav”，“ logins”和“ socialcons” div都可以根据需要在“ mobimenubg”中进行组合div

如果我继续将“导航栏” 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();

或者我可以将其包括在括号中：

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

我不知道约定-

帮助极大的赞赏！

Answer 1

我已将整个区域包裹在一个div（mobimenubg）中，但是主要的导航栏的作用就好像不在该div中一样，

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

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