Question

当我点击顶部菜单中的链接时，我的问题是让我的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>

任何关于如何解决这个问题的想法都会很棒。我只是学习如何使用它，所以如果你有帮助，请具体说明应该去哪里。您可以访问www.rsd17.org/test/test/untitled1.shtml查看实时网站，谢谢

Answer 1

抱歉忙着以前不能回答。

你可以这样做：

向两个导航添加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>

这必须在<script type='text/javascript' src='nav.js'></script>

之后

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

EDIT ---------------------------------------------- ----

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

同样总是使用ids 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');
                    }
                }
            });

不要忘记这必须在<script type='text/javascript' src='nav.js'></script>之后。

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

1 个答案: