Question

在页面上：Make parent menu clickable，jquery：

jQuery(document).ready(function() {
    jQuery('ul li > a.dropdown-toggle').addClass('disabled');
});

...作为替代解决方案。我想知道的是，然后可以添加“.... addClass（'enabled'）;”相反，要使父菜单项可单击？

我不想在菜单中放置自定义链接，我不想修改bootstrap文件，我不想修改除了我的外部jquery（“。js”）文件之外的任何其他文件自己的WordPress主题，以及我的主题文件（header.php，page.php等）当然。

我尝试将dropdown-toggle类添加到wp_nav_menu中，如下所示：

menu_class' => 'list_no_decoration dropdown-toggle',

然后只需将上面的代码修改为：

jQuery('ul li > a.dropdown-toggle').addClass('enabled');

但遗憾的是，父菜单项仍然无法点击。我非常喜欢这个解决方案，因为它非常简单，并且可以在我最终设计的其他主题中轻松重复。

我目前的代码如下：

的header.php

<div class="container-fluid"  id="header_nav">
  <div class="row" id="main_nav_row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="header_nav_col">
        <span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span>
        <?php
            wp_nav_menu(
                array(
                    'sort_column' => 'menu_order', 
                    'menu' => 'Categories', 
                    'container_class' => 'main-menu', 
                    'container_id' => 'header', 
                    'theme_location' => 'header',
                    'menu_class' => 'list_no_decoration',
                    'menu_id' => 'top_nav',
                )
            );
        ?>
    </div>
  </div>
</div>

的style.css

ul.list_no_decoration { /* "list_no_decoration" as per menu_class in wp_nav_menu */
    list-style: none;
    border:0;  /* Reset */
    margin:0; /* Reset */
    padding:0; /* Reset */
    outline:0; /* Reset */
}
ul.list_no_decoration#top_nav {
    vertical-align: top;
    top:0;
    width:99.9%;
    padding-left: 0.05%;
    margin: 0 auto;
    display: inline-block;
    font-size: 0;
    text-align: center;
}
ul.list_no_decoration#top_nav li {
    display: inline-block;
    vertical-align: top;
    border: 1px solid white;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    width: 120px;
}
ul.list_no_decoration#top_nav li a {
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
ul.list_no_decoration#top_nav li > a:link {
}
ul.list_no_decoration#top_nav a:visited {
    font-size: 14pt;
    text-decoration: none;
    color: #fff;
}
ul.list_no_decoration#top_nav a:active {
    font-size: 14pt;
    text-decoration: none;
    color: #fff;
}
ul.list_no_decoration#top_nav > li > a:hover {
}

/* sub-level menu item */
ul.sub-menu {
    position: absolute;
    width: 120px;
    border:0;  /* Reset */
    margin:0; /* Reset */
    padding:0; /* Reset */
    outline:0; /* Reset */
}
ul.sub-menu li {
    position: relative;
    display: block;
    border:0;  /* Reset */
    margin:0; /* Reset */
    padding:0; /* Reset */
    outline:0; /* Reset */
    top: 30px;
    left: -11px;
    background-color:black;
}
ul.list_no_decoration#top_nav  > li ul {
    vertical-align: top;
    top: 0;
    border:0;  /* Reset */
    margin:0; /* Reset */
    padding:0; /* Reset */
    outline:0; /* Reset */
    display: none; /* display: none; to make it invisible until hover */
}
ul.list_no_decoration#top_nav > li:hover ul {
    display: block;
}

以下是菜单目前的样子：

enter image description here

Answer 1

只需像这样制作HTML，不要只在父级菜单

的下拉列表中添加<a href=" ">

<nav>
  <ul id="menu">
    <li><a href="YOUR_LINK_HERE">MENU</a>
        <ul>
            <li>display 1</li>
            <li>display 2</li>
            <li>display 3</li>
            <li>display 4</li>
        </ul>
    </li>
  </ul>
</nav>

使用jquery使父菜单项可单击的代码

1 个答案: