我有一个侧边栏下拉菜单,正在使用jquery进行操作,但是当用户点击该项时页面刷新并且菜单崩溃。为了解决这个问题,即保持扩展,我决定将REQUEST_URI与菜单项URL进行比较,如果找到,我将触发click事件。为了实现这一点,我使用了剪切
$("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click");
适用于除菜单项目列表中第三个最后位置的特定项目以外的所有项目。下面是我正在执行的代码,我面临的问题是:
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav asurion-sidebar" >
<?php
$nav_menu_items = wp_get_nav_menu_items( 'left-sidebar' );
$menu_items = wpse170033_nav_menu_object_tree( $nav_menu_items );
$parents = get_post_ancestors( $post->ID );
foreach($menu_items as $items)
{
$parents1 = get_post_ancestors( $items->ID );
if(count($items->children) > 0)
{
?>
<li class="dropdown first-level">
<a href="#" class="dropdown-toggle " data-toggle="dropdown"><i class="fa <?php echo $items->classes[0];?>" aria-hidden="true"></i><?php echo $items->post_title;?> <i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i></a>
<ul class="dropdown-menu forAnimate" role="menu">
<?php
foreach($items->children as $citems)
{
if(count($citems->children) > 0)
{?>
<li class="dropdown thirdlevel ">
<a style="cursor:pointer" class="dropdown-toggle naveen" data-toggle="dropdown-submenu"><i class="fa <?php echo $citems->classes[0];?>" aria-hidden="true"></i><?php echo $citems->post_title;?><i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i></a>
<ul class="dropdown-submenu forAnimate lastlevel" role="menu">
<?php
foreach($citems->children as $ccitems)
{
if(strpos($ccitems->url,'localhost')){
$sea_domain = 'localhost';
}elseif(strpos($ccitems->url,'asurion.com')){
$sea_domain = 'asurion.com';
}
$compareUrl = explode($sea_domain,$ccitems->url) ;
if($_SERVER['REQUEST_URI'] == $compareUrl[1]){
?>
<script>
$(document).ready(function(){
$("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
<?php }
echo "<li><a target='".$ccitems->target."' href='".$ccitems->url."'>".$ccitems->post_title."</a></li>";
}
?>
</ul>
</li>
<?php
}
else
{
if(strpos($citems->url,'localhost')){
$sea_domain = 'localhost';
}elseif(strpos($citems->url,'asurion.com')){
$sea_domain = 'asurion.com';
}
$compareUrl = explode($sea_domain,$citems->url);
echo "<li><a target='".$citems->target."' href='".$citems->url."'>".$citems->post_title."</a></li>";
if($_SERVER['REQUEST_URI'] == $compareUrl[1]){
?>
<script>
$(document).ready(function(){
$("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click");
});
</script><?php
}
}
}
?>
</ul>
</li>
<?php
}
else
{
if(get_the_title($post->ID)=="Dashboard" && $items->post_title=="Home" && count($parents)==0)
{
echo "<li class='active'><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>";
}
else
{
echo "<li><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>";
}
}
}
?>
</ul>
</div>
</div>
</nav>
任何帮助都将不胜感激。
这里是为侧边栏菜单迭代的数组:Array,在数组中,jquery片段失败的项目之一是&#34; Device&#34; &GT; &#34;手机模拟器&#34;
这是源代码中的Extracted HTML code(它不包含js代码,因为小提琴不允许js代码在html部分写入,找到JS代码,滚动上面)
答案 0 :(得分:0)
我无法想象你输出的原因
<script>
$(document).ready(function(){
$("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
在循环中,它会使您的HTML代码看起来很乱。你不应该输出这么多$(document).ready(...)
。
您可以为<A />
提供一个特殊的className,例如&#39; xxx&#39;,然后在</body>
之前输出脚本代码。
<script>
$(document).ready(function(){
$("a.xxx").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
它好一点。
如果您想保留菜单的状态,则应使用cookie
或localStorage
,而不是这样。
和jsfiddle希望你分开你的html,css,js代码,但是通过你的方式,你的html和js不能分开,它不好。你可以提供一些css使jsfiddle结果页面看起来更好,它可以帮助别人理解你的结构。