保持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>