我想请你帮忙。我正试图在点击时显示子菜单。
page:[www.marekmelena.eu] [1]
在左侧,您可以看到很少的菜单。它们是由wordpress自动创建的。 我想将“sub2,sub3”隐藏为默认值。但点击“#main”后,它们应该是可见的。
我已经从这个网站尝试了一些解决方案,但不知何故它不起作用。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
there should be script, right?
</script>
</head>
我正在通过以下方式调用菜单:
<div class="menu-style">
<h4><?php $nav_menu = wp_get_nav_menu_object(6); echo $nav_menu->name; ?></h4>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
这是结果(我想隐藏/显示课程子菜单):
<h4>Hlavní menu</h4>
<div class="menu-hlavni-menu-container">
<ul id="menu-hlavni-menu" class="menu">
<li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-61">
<a href="http://marekmelena.eu/transparentni-ucet/">#main</a>
<ul class="sub-menu">
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74">
<a href="http://marekmelena.eu/sub2/">sub2</a>
<ul class="sub-menu">
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
<a href="http://marekmelena.eu/sub3/">sub3</a>
</li>
</ul>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76">
<a href="http://marekmelena.eu/sub2/">sub2</a>
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://marekmelena.eu/sub3/">sub3</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-has-children menu-item-82">
<a href="http://marekmelena.eu/transparentni-ucet/">Transparentní účet</a>
<ul class="sub-menu">
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-83">
<a href="http://marekmelena.eu/o-hw-world-kontakt/">O HW World, kontakt</a>
<ul class="sub-menu">
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://marekmelena.eu/clankyblog/">Články/blog</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
谢谢你的帮助!! :)
答案 0 :(得分:0)
使用.toggle()
显示或隐藏.sub-menu
元素。
或.slideToggle()
使用滑动动作显示或隐藏.sub-menu
元素以获取额外的“ oohlala ”(©Matthew Corway)
不要忘记.preventDefault()
取消重定向事件(点击带有href的<a>
)。
.preventDefault() documentation
$(document).ready(function(){
$('.menu-item > a').click(function(e){
e.preventDefault();
$(this).next('.sub-menu').slideToggle();
});
});
.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Hlavní menu</h4>
<div class="menu-hlavni-menu-container">
<ul id="menu-hlavni-menu" class="menu">
<li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-61">
<a href="http://marekmelena.eu/transparentni-ucet/">#main</a>
<ul class="sub-menu">
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74">
<a href="http://marekmelena.eu/sub2/">sub2</a>
<ul class="sub-menu">
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
<a href="http://marekmelena.eu/sub3/">sub3</a>
</li>
</ul>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76">
<a href="http://marekmelena.eu/sub2/">sub2</a>
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://marekmelena.eu/sub3/">sub3</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-has-children menu-item-82">
<a href="http://marekmelena.eu/transparentni-ucet/">Transparentní účet</a>
<ul class="sub-menu">
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-83">
<a href="http://marekmelena.eu/o-hw-world-kontakt/">O HW World, kontakt</a>
<ul class="sub-menu">
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://marekmelena.eu/clankyblog/">Články/blog</a></li>
</ul>
</li>
</ul>
</li>
</ul>
答案 1 :(得分:0)
首先隐藏您的子菜单
.sub-menu{
display:none;
}
&#13;
然后添加一些jQuery以在用户点击&#34; #main&#34;时显示它。 如果您希望用户在再次单击时能够隐藏它,请使用切换方法,否则您可以使用show方法。
我做了一个简单的codepen示例: http://codepen.io/ciammarino/pen/VmZrra
祝你好运。