- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
div >-6ren">
我正在尝试使用我在另一个站点上使用的脚本来让我的导航菜单下拉菜单正确地设置动画。
这是脚本:
jQuery(window).load(function() {
$("#menu > div > ul > li > a").click(function (e) { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
} else {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
if ($(this).next(".sub-menu").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".sub-menu").children().slideDown(200);
}
}
e.stopPropagation();
});
$("html").click(function () { // binding onclick to body
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
});
});
我正在使用的 html 与我正在使用的其他网站不同,因为我试图使用 Wordpress 的默认 wp_nav_menu()
输出来使其工作。这是一个不同的结构,我不知道要进行哪些调整才能使其正常工作。
wp_nav_menu 的输出:
<nav id="menu" role="navigation">
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-163"><a href="#">Programming</a>
<ul class="sub-menu" style="">
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156" style=""><a href="http://lgtheater.org/wordpress-2014/programming/bakery/">Bakery</a></li>
<li id="menu-item-157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157" style=""><a href="http://lgtheater.org/wordpress-2014/programming/lg-cabaret/">LG! Cabaret</a></li>
<li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158" style=""><a href="http://lgtheater.org/wordpress-2014/programming/mainstage/">Mainstage</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155" style=""><a href="http://lgtheater.org/wordpress-2014/programming/outreach/">Outreach</a></li>
</ul>
</li>
<li id="menu-item-164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-164"><a href="#">Get Involved</a>
<ul class="sub-menu">
<li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://lgtheater.org/wordpress-2014/get-involved/audition/">Audition</a></li>
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://lgtheater.org/wordpress-2014/get-involved/script-submissions/">Script Submissions</a></li>
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://lgtheater.org/wordpress-2014/get-involved/volunteer/">Volunteer</a></li>
</ul>
</li>
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://lgtheater.org/wordpress-2014/blog/">Blog</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-165"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://lgtheater.org/wordpress-2014/about/contact/">Contact</a></li>
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://lgtheater.org/wordpress-2014/about/history/">History</a></li>
<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://lgtheater.org/wordpress-2014/about/staff/">Staff</a></li>
</ul>
</li>
<li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-149"><a href="http://lgtheater.org/wordpress-2014/donate/">Donate</a></li>
</ul></div
>
</div>
编辑:添加当前菜单样式:
#menu {
float: right;
position: relative;
top: 25px;
}
#menu > div > ul > li {
display: inline-block;
text-align: center;
padding: 0 1em;
}
#menu > div > ul > li.menu-item-has-children a:after {
content: " \f107";
font-family: FontAwesome;
}
#menu li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #F73987;;
}
#menu > div > ul > li > ul {
display: none;
}
#menu > div > ul > li > ul.selected {
display: inline;
}
最佳答案
在你的脚本中 $(this).parent()
实际上是指li
链接前的元素。
以下面的标记为例
<nav id="menu" role="navigation">
<div class="menu-main-navigation-container">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-163">
<a href="#">Programming</a>
与
$("#menu > div > ul > li > a")
你基本上选择了<a href="#">Programming</a>
, 因此
$(this).parent().addClass("selected");
添加类 selected
至 li
元素,而不是 ul
恰好是
<ul class="sub-menu" style="">
正下方<a href="#">Programming</a>
在你的标记中。您应该添加类 selected
给 child 而不是 parent 。
尝试如下更改脚本
$("#menu > div > ul > li > a").click(function (e) { // binding onclick
if ($(this).next(".sub-menu").hasClass('selected')) {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
} else {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
if ($(this).next(".sub-menu").length) {
$(this).next(".sub-menu").addClass("selected"); // display popup
$(this).next(".sub-menu").children().slideDown(200);
}
}
e.stopPropagation();
});
编辑
不确定原始菜单是如何工作的,但这可能是基于您的 css 定义的解决方案。
关于下拉菜单的 Javascript (wp_nav_menu) 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28185953/
我的网址是这样的: http://domain.com/?s=searchquery&post_type=qa_faqs 该页面列出了“searchquery”的搜索结果。 然后我得到了帖子类型 $p
有没有办法改变 child 由 WordPress 本身生成自定义类名? 我认识家长您可以使用 'menu_class' => 'newname' 删除或更改名称. 我找不到答案。我试过'submen
如何在网站标题中垂直居中 det wordpress 函数 wp_nav_menu?我已经使用了 learnWebCode 菜单教程链接:https://www.youtube.com/watch?v
我有以下代码: $nav_menu_args = array('fallback_cb' => '','menu' => 'menu', 'menu_class' => 'menu_class');
我正在尝试从我的 wordpress 菜单中删除特定链接: First Second Third function remove_link( $menu ) { return str_repl
这是一个 self 问答。 如何修改 wp_nav_menu 输出中出现的文本/html?例如,我想为页面和类别添加特色图像。 您会看到使用自定义步行器执行此操作的示例,但对于小的更改来说,代码非常复
在我的主题中有一个导航菜单功能 function ct_nav() { 'nav', 'theme_location' => 'primary') ); ?> } 如何手动添加
我需要使用 wp_nav_menu 设置一些分页,所以我需要访问菜单中的上一个、当前和下一个项目。有什么想法吗? 最佳答案 好的,这就是我想出的——而且它有效。 term_id, array( 'or
我正在尝试使用我在另一个站点上使用的脚本来让我的导航菜单下拉菜单正确地设置动画。 这是脚本: jQuery(window).load(function() { $("#menu > div >
哦,光荣的 Stack,给我谜语吧;为什么我的 wp_nav_menu 没有样式? 我的 function.php 设置如下: 'Header Navigation')); } ?> 我的 wp_n
如何转换: menu1 到 wp_nav_menu 里面的div和class太多了,谁能帮我解决这个问题?谢谢! 最佳答案 这可以使用 css 中的 nth-child() 选择器来完
我使用 wordpress 函数 wp_nav_menu() 来显示我在 WP 菜单中创建的分层菜单。这是片段: 这是它的 html 输出: Home Page Il film Di ch
我正在尝试使用 wp_nav_menu() 制作按钮菜单,但是当我尝试将文本(有时是三行或两行文本)放置在背景图像的中间时,我无法垂直对齐。将鼠标悬停在我想添加的链接上时,它似乎不起作用。 CSS .
我该怎么做: 我想使用 wp_nav_menu() 创建菜单并稍微自定义它的输出 html。我想把 在链接 在每个 里面菜单项。 我知道我可以使用 的背景图像来完成此操作css 中的元素,但我的目
它包含 家, 公司, 帮助支持, 产品, 定价,和 登录。 我在页眉的导航栏中使用它,我将在页脚中使用它。在页脚中,它只会显示所有菜单项,但不包括登录。我该怎么办?我是 wordpress 的新手。
我希望有一个简单的 css 修复程序。问题很简单,我正在制作一个自定义的 wordpress 主题,我正在使用一些自定义菜单,代码工作正常,但我制作了一个带有分隔符的内联菜单 css 样式(由 bor
我环顾四周,似乎找不到一种直接的方法来做到这一点。我有一个使用 wp_nav_menu 的下拉菜单的页面列表,我只想将指向您当前所在页面的链接设为不同的颜色。 最佳答案 您是否尝试过使用选择器 cur
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve th
如何在 wp_nav_menus 中添加图标?..这是我设计的图片 http://postimg.org/image/w7x2hfn75/ 我想把第一个菜单做成图标,有什么办法吗?.. 我的代码 '
我有一个名为“header-menu”的菜单,我只希望这个菜单受到我在下面编写的函数的影响。如何防止其他菜单受到影响? 脚本在 header.php 中是这样调用的 'header-menu');
我是一名优秀的程序员,十分优秀!