Javascript 从外部链接打开Jquery手风琴菜单_Javascript_Jquery

Javascript 从外部链接打开Jquery手风琴菜单

javascript jquery

Javascript 从外部链接打开Jquery手风琴菜单,javascript,jquery,Javascript,Jquery,当我单击顶部菜单中的链接时，我很难让jquery手风琴侧菜单打开到正确的位置。对不起，我把密码调高了。以下是我的页面：这是我的侧导航JS： function initMenu() { $('#nav ul').hide(); /*$('#nav ul:first').show();*/ $('#nav li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) &

当我单击顶部菜单中的链接时，我很难让jquery手风琴侧菜单打开到正确的位置。对不起，我把密码调高了。以下是我的页面：

这是我的侧导航JS：

function initMenu() {
$('#nav ul').hide();
/*$('#nav ul:first').show();*/
$('#nav li a').click(
function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    return true;
    }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#nav ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
    return false;
     }
   }
 );
}
$(document).ready(function() {initMenu();});

我的侧面导航UL列表

<ul id="nav"> 
 <li><a href="#">Item 1</a>    
 <ul>      
<li><a href="#">test1</a></li>      
<li><a href="#">test2</a></li>      
<li><a href="#">test3</a></li>  
 </ul>  
</li> 
<li><a href="#">Item 2</a>  
  <ul>     
   <li><a href="#">Sub-Item 2 a</a></li> 
   <li><a href="#">Sub-Item 2 b</a></li>  
  </ul> 
</li>  
<li><a href="#">Item 3</a>  
   <ul>      
   <li><a href="#">Sub-Item 3 a</a></li>
   <li><a href="test1.shtml">Sub-Item 3 b</a></li>
   <li><a href="#">Sub-Item 3 c</a></li>
   <li><a href="#">Sub-Item 3 d</a></li>
  </ul> 
</li>  
<li><a href="#">Item 4</a>    
<ul>     
 <li><a href="#">Sub-Item 4 a</a></li>
 <li><a href="#">Sub-Item 4 b</a></li>    
 <li><a href="#">Sub-Item 4 c</a></li> 
</ul>  
</li>
</ul>

我要激活的页面

<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
customSearchOptions['overlayResults'] = true;
var customSearchControl =   new       google.search.CustomSearchControl('008189712368144530774:cd8hgx1d4hk',   customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
customSearchControl.draw('cse', options);
}, true);

</head>

<body>

<div id="container">
<div id="topbox">
     <div id="topnav"><!--#include file="topnav.html" --></div>
     <div id='cse'>Loading</div>
</div>
<div id="leftcol">
    <div id="Topleft"><!--#include file="topleftphoto.html" --></div>
    <div id="SideNav"><!--#include file="sidenavdistrict.html" --></div>
</div>
<div id="rightcol">
    <div id="TopRight">Content for  id "topright" Goes Here</div>
    <div id="Body">Content for  id "body" Goes Here</div>
</div>
<div id="Footer">Content for  id "footer" Goes Here</div>
 </div>


load（'search'，'1'，{language'en'，style:google.loader.themes.V2_DEFAULT}）；
setOnLoadCallback（函数（）{
var customSearchOptions={}；
customSearchOptions['OverlyResults']=true；
var customSearchControl=new google.search.customSearchControl（'008189712368144530774:cd8hgx1d4hk'，customSearchOptions）；
customSearchControl.setResultSetSize（google.search.search.FILTERED\u CSE\u RESULTSET）；
var options=new google.search.DrawOptions（）；
customSearchControl.draw（'cse'，选项）；
}，对）；
加载
id为“topright”的内容位于此处
id“body”的内容在这里
id“footer”的内容位于此处

任何关于如何解决这一问题的想法都会很好。我只是在学习如何使用它，所以如果你真的需要帮助，请具体说明应该去哪里。您可以在www.rsd17.org/test/test/untitled1.shtml上查看live站点，谢谢

很抱歉一直很忙，无法提前回复

您可以这样做：

将ID添加到两个导航：

<div id="container">
    <div id="topbox">
        <div id="topnav"><ul id="MenuBar1" class="MenuBarHorizontal">
  <li  id="dis"><a class="MenuBarItemSubmenu" href="#">DISTRICT</a>
    <ul>
      <li><a href="test1.shtml">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li  id="sch"><a href="#">SCHOOLS</a></li>
  <li  id="stu"><a class="MenuBarItemSubmenu" href="#">STUDENTS</a>
    <ul>
      <li><a href="#">Item 3.1</a>      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  </li>
  <li id="sta"><a href="#">STAFF</a></li>
  <li><a href="#">PARENTS</a></li>
  <li><a href="#">COMMUNITY</a></li>
  <li><a href="#">CALENDAR</a></li>
  <li><a href="#">QUICKLINKS</a></li>
</ul>

( ... )

<ul id="nav"> 
 <li ><a href="#">Item 1</a>    
  <ul id="i1">      
    <li><a href="#">test1</a></li>      
    <li><a href="#">test2</a></li>      
    <li><a href="#">test3</a></li>  
  </ul>  
</li> 
    <li><a href="#">Item 2</a>  
      <ul  id="i2">     
       <li><a href="#">Sub-Item 2 a</a></li> 
       <li><a href="#">Sub-Item 2 b</a></li>  
      </ul> 
    </li>  
    <li><a href="test1.shtml" id="test1">Item 3</a>  
       <ul id="i3">      
       <li><a href="#" >Sub-Item 3 a</a></li>
       <li><a href="#">Sub-Item 3 b</a></li>
       <li><a href="#">Sub-Item 3 c</a></li>
       <li><a href="#">Sub-Item 3 d</a></li>
      </ul> 
   </li>  
   <li><a href="#">Item 4</a>    
    <ul id="i4">     
     <li><a href="#">Sub-Item 4 a</a></li>
     <li><a href="#">Sub-Item 4 b</a></li>    
     <li><a href="#">Sub-Item 4 c</a></li> 
   </ul>  
   </li>
  </ul>
























( ... )

并使用以下javascript：

<script>
            var ul = document.getElementById('topnav');
            ul.onclick = function(event) {                  
                switch (event.target.parentNode.id){
                    case "dis" : $('#nav ul:visible').slideUp('normal');
                                $('#i1').slideDown('normal');
                                break;

                    case "sch" : $('#nav ul:visible').slideUp('normal');
                                $('#i2').slideDown('normal');                               
                                break;

                    case "stu" : $('#nav ul:visible').slideUp('normal');
                                $('#i3').slideDown('normal');
                                break;

                    case "sta" : $('#nav ul:visible').slideUp('normal');
                                $('#i4').slideDown('normal');
                                break;
                }

            };
</script>


var ul=document.getElementById（'topnav'）；
ul.onclick=函数（事件）{
开关（event.target.parentNode.id）{
案例“dis”：$（'nav ul:visible'）。slideUp（'normal'）；
$（'i1'）。向下滑动（'normal'）；
打破
案例“sch”：$（'nav ul:visible'）。slideUp（'normal'）；
$（'#i2'）。向下滑动（“正常”）；
打破
案例“stu”：$（'nav ul:visible'）。slideUp（'normal'）；
$（'i3'）。向下滑动（'normal'）；
打破
案例“sta”：$（'#nav ul:visible'）。slideUp（'normal'）；
$（'i4'）。向下滑动（'normal'）；
打破
}
};

这必须在

我尝试了你的页面，每次点击顶部菜单，就会打开侧菜单上相应的项目。我想这就是你想要的。但是，通过这种方式，您必须为交换机上的每个项目添加新代码。试试看；）

编辑--------------------------------------------------

我假设页码的名称将打开相应的项。（1区将开放项目1，2区将开放项目2，学校1将开放项目1，等等）

还应始终使用ID i1、i2、i3。。。对于侧菜单，您不需要像对待学生那样使用i6、i7等

如果您总是更改页面，则不需要前面的代码，只需此代码即可

$('#body').ready(function(){
                var URL = location.pathname;

                for(var i = 0; i < 4; i++){ // 4 = number of items, if you add more increase it
                    if(URL.indexOf(i) != -1){
                        $('#nav ul:visible').slideUp('normal');
                        $('#i'+i).slideDown('normal');
                    }
                }
            });

$（'#body'）.ready（函数（）{
var URL=location.pathname；
对于（var i=0；i<4；i++）{//4=项目数，如果添加更多，则增加它
如果（URL.indexOf（i）！=-1）{
$（'导航ul:可见'）.slideUp（'正常'）；
$（'i'+i）.slideDown（'normal'）；
}
}
});

别忘了这必须是在

之后。对不起，您能更具体地说明一下您想做什么吗？您想在单击顶部菜单上的链接时打开手风琴吗？我有一个顶部spry导航栏和一个jquery手风琴侧导航栏。当我单击顶部spry栏中的链接时，我希望它展开accordion上的正确栏，以反映正确的活动页面。希望这能澄清一点。javascript大师中的任何人对此都有想法。非常感谢，我明天会尝试。顶部的导航按钮每个都有自己的侧导航，所以我将制作8个侧导航。所以现在在“地区”下，我有3个子菜单。假设第一个子菜单应该打开第1项，第二个子菜单应该打开第2项，等等。上面的代码是相同的吗？是的。上述右侧代码使学区打开第1项，学校打开第2项，学生打开第3项，员工打开第4项。如果需要8，则必须添加到switch子句中，只需添加如下情况：case“[nav id]”：$（“#nav ul:visible”）.slideUp（'normal'）$（“#[side id]”）。向下滑动（“正常”）；打破如果你需要的话，我可以帮你。太好了。这一个很好用，现在我正试图用你的switch子句让其他链接正常工作。如果你想退房