保持jquery菜单打开后点击

Question

这似乎是一个常见问题，但我无法调整以前给出的答案，我的情况。我有一个jQuery垂直手风琴菜单，我想用它来浏览两个网站，home.html和research.html。这里是我的home.html的相关部分的样子：

<div id="cssmenu"> 
<ul> 
    <li class='active'><a href='index.html'>Home</a></li> 
    <li><a href='research.html'>Research</a> 
     <ul> 
      <li><a href='research.html#r1'><span>interests</span></a></li>      
      <li><a href='research.html#r2'><span>preprints</span></a></li> 
      <li><a href='research.html#r3'><span>publications</span></a></li> 
      <li><a href='research.html#r4'><span>coauthors</span></a></li> 
     </ul> 
    </li> 
</ul> 

这里是我的research.html的相关部分的样子：

<div id="cssmenu"> 
<ul> 
    <li><a href='index.html'>Home</a></li> 
    <li class='active'><a href='research.html'>Research</a> 
     <ul> 
      <li><a href='research.html#r1'><span>interests</span></a></li>      
      <li><a href='research.html#r2'><span>preprints</span></a></li> 
      <li><a href='research.html#r3'><span>publications</span></a></li> 
      <li><a href='research.html#r4'><span>coauthors</span></a></li> 
     </ul> 
    </li> 
</ul> 

和这里的“my”jquery-code

$(document).ready(function(){ 
$('#cssmenu > ul > li ul').each(function(index, e){ 
    var count = $(e).find('li').length; 
    var content = '<span class="cnt">' + '</span>'; 
    $(e).closest('li').children('a').append(content); 
    }); 
$('#cssmenu > ul > li > a').click(function() { 
    $('#cssmenu li').removeClass('active'); 
    $(this).closest('li').addClass('active'); 
    var checkElement = $(this).next(); 
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
     $('#cssmenu ul ul:visible').slideUp('normal'); 
     checkElement.slideDown('normal'); 
    } 
    if($(this).closest('li').find('ul').children().length == 0) { 
     return true; 
    } else { 
     return false; 
    } 
    }); 

如果我点击Research，子菜单就会打开，如果我点击子菜单项，页面上的相应位置就会被加载。但是，之前打开的子菜单现在再次关闭。我怎样才能避免这种行为？

任何帮助非常感谢，但请记住，我不是一个网络程序员。

Answer 1

请尝试娄代码 我也更新了小提琴

Demo Link

$(document).ready(function() { 
 
    $('#cssmenu > ul > li ul').each(function(index, e) { 
 
    var count = $(e).find('li').length; 
 
    var content = '<span class="cnt">' + '</span>'; 
 
    $(e).closest('li').children('a').append(content); 
 
    }); 
 
    $('#cssmenu > ul > li > a').click(function() { 
 
    $('#cssmenu li').removeClass('active'); 
 
    $(this).closest('li').addClass('active'); 
 
    var checkElement = $(this).next(); 
 
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
 
     $('#cssmenu ul ul:visible').slideUp('normal'); 
 
     checkElement.slideDown('normal'); 
 
    } 
 
    if ($(this).closest('li').find('ul').children().length == 0) { 
 
     return true; 
 
    } else { 
 
     return false; 
 
    } 
 
    }); 
 

 

 
    var hashTag = window.location.hash; 
 
    if (hashTag != '') { 
 
    $(hashTag).addClass('active'); 
 
    } 
 

 
});

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu li, 
 
#cssmenu a { 
 
    list-style: none; 
 
    text-decoration: none; 
 
} 
 
#cssmenu { 
 
    width: 325px; 
 
    float: right; 
 
    margin-top: 60px; 
 
} 
 
#cssmenu > ul { 
 
    position: fixed; 
 
} 
 
#cssmenu > ul > li > a { 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    font-family: Gill Sans; 
 
    padding-bottom: 300px; 
 
    color: #005D9A; 
 
} 
 
#cssmenu > ul > li > a > span { 
 
    background: #FFFFFF; 
 
} 
 
#cssmenu > ul > li > a:hover { 
 
    text-decoration: none; 
 
} 
 
#cssmenu > ul > li.active {} #cssmenu > ul > li.active > a { 
 
    color: #C80000; 
 
} 
 
#cssmenu > ul > li.active > a span { 
 
    background: #FFFFFF; 
 
} 
 
#cssmenu span.cnt { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background: none; 
 
} 
 
/* Sub menu */ 
 

 
#cssmenu ul ul { 
 
    display: none; 
 
    padding-bottom: 15px; 
 
    padding-left: 0px; 
 
} 
 
#cssmenu ul ul li {} #cssmenu ul ul a { 
 
    font-family: Avenir; 
 
    font-size: 18px; 
 
} 
 
#cssmenu ul ul a:hover { 
 
    color: #585858; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cssmenu"> 
 
    <ul> 
 
    <li class='active'><a href='index.html'>Home</a> 
 

 
    </li> 
 
    <li id="research"><a href='research.html'>Research</a> 
 

 
     <ul> 
 
     <li><a href='research.html#rarticles'><span>interests</span></a> 
 

 
     </li> 
 
     <li><a href='research.html#rarticles'><span>preprints</span></a> 
 

 
     </li> 
 
     <li><a href='research.html#rarticles'><span>publications</span></a> 
 

 
     </li> 
 
     <li><a href='research.html#rarticles'><span>coauthors</span></a> 
 

 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>