0

我有一个切换菜单，请参阅JsFiddle中的代码和功能

当您单击 h3 标签时，例如类别 1，它是一个标签，菜单打开并在链接/当前页面上保持打开状态。

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

当您单击当前页面上的任何链接时，有什么方法可以避免关闭和打开功能？

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

提前致谢。

4

1 回答 1

1

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

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

   #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-04T00:40:00.613 回答