logo标签列表

点击时显示子菜单

javascriptjqueryhtmlcss
3

我希望你能帮助我。我正在尝试在单击时显示子菜单。

页面：[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>

谢谢您的帮助！！: )
2个回答
1

使用.toggle()来显示或隐藏.sub-menu元素。

或者使用.slideToggle()来展示或隐藏.sub-menu元素，并带有一些额外的滑动效果，让人感到更加惊喜 (© Matthew Corway)

别忘了使用.preventDefault()来取消重定向事件（当点击一个带有href属性的<a>标签时）。

.preventDefault()文档

$(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
或者使用SlideToggle来增加一些额外的oohlala效果（专业术语）。 - Matthew Corway
@tmaven 你真正想要什么？是前往外部链接还是打开当前的.sub-menu？如果你使用target="_blank"打开链接，你当前的页面将失去焦点。因此，我认为没有一个好的解决方法。 - Robiseb
@Robiseb，子菜单在点击后是否可以保持可见？例如：http://marekmelena.eu；测试是第一级，但当我点击第二级（Transparentni ucet）时，它会隐藏。 - tmaven
1
@Robiseb 我想我修好了！我在page.php中添加了样式<?php get_header(); ?> <style media="screen" type="text/css"> .current-menu-ancestor .sub-menu { display:block; } </style> <div class="content"> .... - tmaven
@tmaven，你做得很对。但是你可以直接将这行代码放在CSS文件中，并使用PHP在正确的“a”上添加.current-menu-ancestor类。 - Robiseb
显示剩余9条评论
0

首先隐藏您的子菜单

.sub-menu{
  display:none;
  }

然后添加一些jQuery代码，当用户点击“#main”时显示它。 如果您希望用户能够在再次单击时隐藏它，请使用toggle方法，否则可以使用show方法。

我制作了一个简单的codepen示例： http://codepen.io/ciammarino/pen/VmZrra

祝你好运

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接