我正在更改Wordpress管理菜单,而不是在悬停时向右侧打开菜单项的子菜单,而是打开父项目下方的下拉列表。我已经为此做了所有必要的CSS更改,除了它仍然只用光标悬停打开,并且也不会保持打开状态。
我需要将管理菜单下拉列表更改为点击而不是悬停。
有人可以建议这里需要的任何JavaScript吗? - 或者CSS,如果合适的话?
非常感谢
一个菜单项的示例代码:
<li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-appearance menu-top-last" id="menu-appearance">
<a href="nav-menus.php" class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-appearance menu-top-last" aria-haspopup="true">
<div class="wp-menu-arrow">
<div></div>
</div>
<div class="wp-menu-image dashicons-before dashicons-admin-appearance"><br></div>
<div class="wp-menu-name">Appearance</div>
</a>
<ul class="wp-submenu wp-submenu-wrap" style="">
<li class="wp-submenu-head ws-nmh-is-new-menu" aria-hidden="true">Appearance
<span class="ws-nmh-new-menu-flag" data-nmh-menu-url="themes.php"></span>
</li>
<li class="wp-first-item">
<a href="nav-menus.php" class="wp-first-item">Menus</a>
</li>
<li class="">
<a href="themes.php?page=update-theme-options">Theme Options</a>
</li>
<li class="">
<a href="themes.php?page=import-theme-options">Import Theme Options</a>
</li>
<li class="">
<a href="themes.php?page=export-theme-options">Export Theme Options</a>
</li>
<li class="">
<a href="themes.php">Themes</a>
</li>
<li class="hide-if-no-customize">
<a href="customize.php?return=%2Fwp-admin%2Fadmin.php%3Fpage%3Dwpda_vertical_menu_themes" class="hide-if-no-customize">Customise</a>
</li>
<li>
<a href="widgets.php">Widgets</a>
</li>
</ul>
自定义CSS以及Wordpress现有的CSS:
.wp-menu-arrow {
display: block !important;
}
#adminmenu li.wp-has-submenu .wp-menu-arrow div::before {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#adminmenu .wp-has-submenu .wp-menu-arrow div::before {
content: "\f345";
color: #adb5bd;
position: absolute;
right: 7px;
top: 13px;
font-family: dashicons;
transition: ease-in-out 0.3s;
}
#adminmenu li.wp-has-submenu.opensub .wp-menu-arrow div::before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
color: #FFF;
}
#adminmenu .wp-submenu.wp-submenu-wrap {
display:block;
}
#adminmenu .opensub .wp-submenu, #adminmenu .wp-menu-open .wp-submenu {
position: relative;
height: 100%;
top: 0px;
margin-top: 0px !important;
left: 0;
text-align: left;
}
#adminmenu .wp-submenu {
margin-left: 0px;
box-shadow: none;
}
#adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu {
min-width: 220px;
width: auto;
}
#adminmenu .wp-submenu .wp-submenu-head {
padding: 20px 20px 10px;
}