切換菜單 - 保持菜單的當前頁

我有一個切換菜單上打開，請參閱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

切換菜單 - 保持菜單的當前頁

回答

相關問題