我有一个客户端站点，它需要侧菜单像手风琴一样，在单击父级后下拉子菜单并在父级或任何子菜单处于活动状态时保持打开状态。菜单是用 PHP 创建的，其中的按钮内容取自服务部分。该菜单是自定义主题的一部分，并已插入到多个页面模板中。作为主题的一部分，我想避免更改模板 php 代码。（不确定主题多久更新一次）我尝试过 css 和 jQuery，但到目前为止，只设法在 onclick 后短暂打开子菜单，然后在页面加载时消失。您可以在https://www.birchandco.com上看到该网站- 目前有一个悬停状态，以便访问者可以导航。一旦使用 onclick 正常工作，这将被删除。PHP 模板：<div class="home_services"> <?php $ser= new WP_Query(array( 'post_type'=>'service', 'posts_per_page' => -1, 'orderby' => 'name', 'order' => 'ASC', 'meta_query' => array( array( 'key' => '_is_ns_featured_post', 'value' => 'yes', ) ) )); ?> <ul class="service_list"> <?php if($ser->have_posts()) : while($ser->have_posts()) : $ser->the_post(); ?> <li class="item"> <a href="<?php the_permalink(); ?>"><?php the_title();?> <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> <?php if(get_the_terms(get_the_ID() , 'service_category')[0]->term_id) {?> <ul class="submenu"> <?php $args = array( 'post_type' =>'service', 'orderby' => 'name', 'order' => 'ASC', 'post__not_in' => array(get_the_ID()),任何帮助将不胜感激。
3 回答
慕无忌1623718
TA贡献1744条经验 获得超4个赞
我设法制定了一个解决方案，以在页面更改时保持子菜单打开。我删除了现有菜单的 PHP 代码并将其替换为
`<?php //echo do_shortcode("[widget id=nav_menu-3]"); ?>`
这个 [widget id=nav_menu-3] 短代码是通过一个小部件短代码创建插件创建的。我使用 WordPress 菜单系统来构建菜单，然后通过导航菜单小部件访问菜单并将其添加到简码部分，以便为小部件创建简码。上面的代码允许您向 PHP 模板添加短代码。
这使我能够将 WordPress 菜单添加到自定义页面模板中。下一步是设置菜单样式，使其看起来像原始菜单，然后通过 CSS 定位当前菜单项、父菜单和子菜单，以便在页面更改时子菜单保持打开状态。请参阅下面的代码
`/*--- show or hide sub navs based on the parent menu item or the current menu item
----------------------------------------------- */
.widget_nav_menu ul li.current-menu-item ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-item ul.sub-menu li ul.sub-menu
{display:none;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li ul.sub-menu
{display:none;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item
ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item
ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item
ul.sub-menu li ul.sub-menu {display:none;}`
之后，我向父级添加了一个伪元素（双箭头）以指示有子菜单。
`/*Sub-Menus Pseudo Element - Add to Customise Header
--------------------------------------------- */
ul#menu-services.menu li a:after {
content: '»';
font-size: 31px;
float: right;
transform: rotate(90deg); -- Turns arrows around so point downwards.
}`
鸿蒙传说
TA贡献1865条经验 获得超7个赞
在页面加载时，测试 URL 是否包含您的手风琴链接到的路径之一。如果是这样，打开那个手风琴。像这样的东西：
(function($) {
$(document).ready(function() {
// Get the current path (for instance, "/service/contesting-a-will-2/")
var pathName = window.location.pathname;
// This is a bit complex, but we're concatenating the pathName variable
// into your selector so we can find a match and toggle the "open" class
$('.home_services ul.service_list li a[href*="' + pathName + '"]').toggleClass('open');
});
})(jQuery);
请注意，我没有对此进行测试，但总体思路只是href将手风琴的属性与pathname我们从 URL 中创建的变量匹配，然后打开该手风琴项目。添加[href*=...意味着“选择所有包含的标签”，然后我们传入我们从中获得的路径window.location.pathname。
在所有条件相同的情况下，这应该在页面完成加载时打开手风琴，这基本上实现了在页面加载时“打开”的目标。
白衣染霜花
TA贡献1796条经验 获得超10个赞
不回答你的问题。但是试试
<div class="container">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Menu 0
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Menu 1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Menu 2
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Menu 3
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
- 3 回答
- 0 关注
- 207 浏览
添加回答
举报
0/150
提交
取消