0

我正在尝试为响应式站点的“小型”或移动大小版本实现 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 设置为“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();

我不知道惯例-

帮助非常感谢！

4

1 回答 1

0

我已经将整个区域包裹在一个 div (mobimenubg) 中，但是主导航栏的行为就像它不在那个 div 中一样，

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

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

检查员截图

于 2012-07-01T18:17:28.240 回答