切换菜单 - 使菜单在当前页面保持打开状态

Question

I've got a toggle menu, please see code and function in JsFiddle我有一个切换菜单，请在 JsFiddle 中查看代码和function

When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.当您单击一个 h3 标签时，例如 Category 1，它是一个标签，菜单打开并在链接/当前页面上保持打开状态。

However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.但是，当您再次单击 h3 标签 (Category1) 或类别 1 的任何子菜单（例如选项 1）时，菜单会折叠关闭，然后在当前页面上再次打开。

Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?有什么办法可以避免点击当前页面的任意链接时关闭和打开function？

Any code or examples would be appreciated.任何代码或示例将不胜感激。

Thanks in advance.提前致谢。

Answer 1

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

HTML 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>

JS JS

   $(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 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>

切换菜单 - 使菜单在当前页面保持打开状态

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-04-04 00:40:00

切换菜单 - 使菜单在当前页面保持打开状态

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-04 00:40:00

解决方案1
1 已采纳 2012-04-04 00:40:00