Question

我正在制作一个垂直的手风琴导航菜单。

对于每个子菜单，我创建了一个我想要显示的HTML页面。简而言之，当我点击“报告”子菜单时，我想在页面上显示红色框（见下面的代码），并显示导航菜单。

简单的问题，对不起，但在我的代码中，我应该这样做以及如何做？我的第一个猜测是将子菜单指向我的外部html文件，但到目前为止我所做的只允许我重新指向另一个HTML页面，然后导航菜单就消失了。

我是否需要在导航菜单旁边创建一种“容器”？

这是导航菜单的jsfiddle。

以下是HTML代码：

    <!doctype html>
    <html lang=''>
    <head>

        <style type="text/css">

    body {
      width: 1280px;
      height: 720px;
      background-color: #E0EBEB;
    }

    </style>
       <meta charset='utf-8'>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="styles.css">
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
       <script src="script.js"></script>
       <title>DCA Application</title>
    </head>

    <body>
    <div id="sidebar">
                <h1>Sidebar</h1>
    </div>

    <div id='cssmenu'>
    <ul>

       <li class='active'><a href='#'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Past</span></a>
          <ul>
<!-- I do not get the result I want if I put "Reports.html" down here -->
             <li><a href='#'><span>Reports</span></a></li>
          </ul>
       </li>
       <li class='has-sub'><a href='#'><span>Present</span></a>
          <ul>
             <li><a href='#'><span>DDS</span></a></li>
             <li class='last'><a href='#'><span>Load Management</span></a></li>
          </ul>
           <li class='has-sub'><a href='#'><span>Future</span></a>
          <ul>
             <li><a href='#'><span>To be defined</span></a></li>
          </ul>
       </li>
       </li>
       <li class='last'><a href='#'><span>Support</span></a></li>
    </ul>
    </div>       
       </body>
    <html>

其中一个html页面的代码：

<html>
    <head>

<meta charset="UTF-8">

<!-- css part -->

    <style type="text/css">
        <style type="text/css">
*{
margin:0;
padding:0;
}
#blackbox{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin-top:-100px;
margin-left:-100px;
border:1px solid black;
height: 90px;
line-height: 90px;
text-align:center; 
vertical-align:middle;
}

</style>

        </style>

<!-- css part end -->
<!-- html part beg -->

</head>
    <body>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<div id="main">

    <div id="blackbox"> 
    <div style="background-color:"> 
    <div class="results"> </div> 
    </div>
   </div>

<!-- html part end -->

<!-- js part -->

<script language="JavaScript"  type="text/javascript">

        var color1 = "#800080";
    var color2 = "#FF0000";
    var result = 1;
    document.querySelector('.results').innerHTML = result;
    if (result < 0) {
    document.querySelector('div').style.backgroundColor = color1;
    } else {
    document.querySelector('div').style.backgroundColor = color2;
    }

        </script>   

<!-- js part -->

    </body>
</html>

Answer 1

选项1 在每个ul上设置id或title attr

    <ul id=title> or <ul title=title>

    //Get the title of the page like this

    var title = document.title; 

    //find this ul  using jquery 
    $("ul[title='title']").slideDown();
//or
    $('#'+title).slideDown();

选项2 试试这个。我只添加了三行评论。您可能必须拆分实际网址。我相信你可以轻松地做到这一点。

    ( function( $ ) {
    $( document ).ready(function() {
  //get the url  
var  url =$(location).attr('href');

//find the a tag having this url and its parent
      var tag =$( "a[href='url']" ).parent().parent();
//slide it down   
 $(tag).slideDown('normal')
    $('#cssmenu > ul > li ul').each(function(index, e){
      var count = $(e).find('li').length;
      var content = '<span class=\"cnt\">' + count + '</span>';
      $(e).closest('li').children('a').append(content);
    });
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');
    $('#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'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      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;   
      }     
    });

    });
    } )( jQuery );

垂直导航 - 单击“加载Html”页面

1 个答案: