切换菜单 - 保持菜单的当前页

我有一个切换菜单上打开，请参阅JsFiddle 切换菜单 - 保持菜单的当前页

代码和功能当你点击一个H3标签如第1类是一个标签时，菜单打开并保持在链接/当前页面上打开。

但是，当您再次点击h3标记（Category1）或类别1（例如选项1）的任何子菜单时，菜单会关闭并在当前页面上再次打开。

当您点击当前页面上的任何链接时，是否可以避免关闭和打开功能？

任何代码或例子，将不胜感激。

在此先感谢。

来源

2012-04-04 grumpypanda

http://jsfiddle.net/LcsLr/33/

HTML

<html> 
    <head> 
    <title>Test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    </head> 

<body> 

    <div id="productmenu"> 
    <div class="submenublock" id="submenu1"> 

     <h3> 
      <a href="#" class="link" >Category 1</a> 
      <a href='#' class="arrow" ></a>    
     </h3> 
     <ul class="second_level"> 
      <li><a href="#" class="linkx">Option 1</a></li> 
      <li><a href="#" class="linkx">Option 2</a></li> 
     </ul> 
     </div> 

     <div class="submenublock" id="submenu2"> 

     <h3><a href="#" class="link">Category 2</a></h3> 

     </div> 

     <div class="submenublock" id="submenu3"> 
      <h3> 
       <a href="#" class="link">Category 3</a> 
       <a href='#' class="arrow" ></a> 
      </h3> 
      <ul class="second_level"> 
       <li><a href="#" class="linkx">Option 1 
        </a></li> 
       <li><a href="#" class="linkx">Option 2 
        </a></li> 
       <li><a href="#" class="linkx">Option 3 
        </a></li> 
      </ul> 
     </div> 


    </div> 

</body>

$(document).ready(function() { 

    $('h3,.second_level li').each(function(){ 
     var href = $(this).children('a').attr('href'); 

     if(window.location.pathname.search(href) != -1) { 
      $(this).children('a').addClass('currentPage') 
     } 
    }); 

    $('.currentPage').each(function(){ 

     var parent; 

     if($(this).parent('h3').length > 0){ 
      parent = $(this).parent('h3'); 
     } 
     else{ 
      parent = $(this).parents('ul').siblings('h3'); 
     } 

     $(parent).children('.arrow').addClass('open'); 
     $(parent).siblings('ul').show(); 

    }); 

    $('.link').click(function() { 

     OpenParent($(this).parent('h3')); 

     window.location = $(this).attr('href'); 

    }); 

    $('.arrow').click(function(e){ 
     e.preventDefault(); 
     OpenParent($(this).parent('h3')); 

    });   
}); 

function OpenParent(CurrentParent){ 
    var currentArrow = $(CurrentParent).children('.arrow'); 

    $('.open').not(currentArrow).removeClass('open').parent().siblings('ul').slideUp('fast'); 

    currentArrow.toggleClass('open'); 

    $(CurrentParent).next().slideToggle('fast'); 

}

CSS

#sidebar { 
    float:left; 
    width:220px; 
} 


#productmenu { width:220px; margin-left: 0px;} 

.submenublock{ 

    margin: 0px; 
    padding: 0px; 

} 

.submenublock h3{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:15px; 
    margin: 0px; 
    border-bottom:#CCC 1px solid; 
} 

.submenublock h3 a{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:15px; 
    text-decoration:none; 
    color: #000000; 

} 

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus 
{ 
color: #00aeef; 
} 

.second_level{ 
    list-style-type:none; 
    list-style:none; 
    margin:0px; 
    padding:0px; 

} 

.second_level li{ 
    list-style-type:none; 
    list-style:none; 
    display: block; 
    border-bottom:#CCC 1px dashed; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    /* background:url(images/menuarrowright.gif) no-repeat right;*/ 
} 

.second_level li a{ 
    display: block; 
    margin-left:15px; 
    text-decoration:none; 
    color:#000000; 


} 

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus 
{ 
color: #00aeef; 
} 


.second_level{ 
    display:none; 
} 

a.currentPage{ 
    color:blue !important; 
} 

.link{ 
    padding:10px;15px; 
    display:block; 
} 

.linkx{ 
    padding:10px;15px; 
    display:block; 
} 

.arrow{ 
    background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px; 

    float:right; 
    height:17px; 
    width:13px; 
    margin-top:-27px; 
} 

.open{ 
    background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px; 
} 


</style>

来源

2012-04-04 00:40:00 rmagnum2002

嗨rmagnum，谢谢你的回复。问题是我的h3是一个标签，在你的情况下它将是标题，所以页面将进入h3链接页面，并且当你点击h3时子菜单始终保持打开状态。有什么办法可以看看我的代码，并从那里改变它？感谢堆。 – grumpypanda 2012-04-04 00:52:10

http://jsfiddle.net/LcsLr/33/ – rmagnum2002 2012-04-04 01:07:49

您在子菜单和菜单中使用了相同的类链接，因为它们是相同的类，它们都具有相同的功能，这就是为什么当您单击时菜单正在关闭子菜单链接。 – rmagnum2002 2012-04-04 01:12:10

切换菜单 - 保持菜单的当前页

回答

相关问题