3 回答

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
我設(shè)法制定了一個(gè)解決方案,以在頁(yè)面更改時(shí)保持子菜單打開(kāi)。我刪除了現(xiàn)有菜單的 PHP 代碼并將其替換為
`<?php //echo do_shortcode("[widget id=nav_menu-3]"); ?>`
這個(gè) [widget id=nav_menu-3] 短代碼是通過(guò)一個(gè)小部件短代碼創(chuàng)建插件創(chuàng)建的。我使用 WordPress 菜單系統(tǒng)來(lái)構(gòu)建菜單,然后通過(guò)導(dǎo)航菜單小部件訪問(wèn)菜單并將其添加到簡(jiǎn)碼部分,以便為小部件創(chuàng)建簡(jiǎn)碼。上面的代碼允許您向 PHP 模板添加短代碼。
這使我能夠?qū)?WordPress 菜單添加到自定義頁(yè)面模板中。下一步是設(shè)置菜單樣式,使其看起來(lái)像原始菜單,然后通過(guò) CSS 定位當(dāng)前菜單項(xiàng)、父菜單和子菜單,以便在頁(yè)面更改時(shí)子菜單保持打開(kāi)狀態(tài)。請(qǐng)參閱下面的代碼
`/*--- 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;}`
之后,我向父級(jí)添加了一個(gè)偽元素(雙箭頭)以指示有子菜單。
`/*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貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
在頁(yè)面加載時(shí),測(cè)試 URL 是否包含您的手風(fēng)琴鏈接到的路徑之一。如果是這樣,打開(kāi)那個(gè)手風(fēng)琴。像這樣的東西:
(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);
請(qǐng)注意,我沒(méi)有對(duì)此進(jìn)行測(cè)試,但總體思路只是href將手風(fēng)琴的屬性與pathname我們從 URL 中創(chuàng)建的變量匹配,然后打開(kāi)該手風(fēng)琴項(xiàng)目。添加[href*=...意味著“選擇所有包含的標(biāo)簽”,然后我們傳入我們從中獲得的路徑window.location.pathname。
在所有條件相同的情況下,這應(yīng)該在頁(yè)面完成加載時(shí)打開(kāi)手風(fēng)琴,這基本上實(shí)現(xiàn)了在頁(yè)面加載時(shí)“打開(kāi)”的目標(biāo)。

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
不回答你的問(wèn)題。但是試試
<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 關(guān)注
- 238 瀏覽
添加回答
舉報(bào)