可点击的下拉菜单

Question

我的网站顶部有以下可点击的导航菜单：

jsFiddle

此代码段中也提供了该代码：

$("nav td a").click(function(e) {
  if ($(this).parent().hasClass('selected')) {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("HERE!");
  } else {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("NO HERE");
    if ($(this).next(".subs").length) {
      $(this).parent().addClass("selected");
      $(this).next(".subs").children().slideDown(200);
    }
  }
  e.stopPropagation();
});

$("body").click(function() {
  $("nav .selected div div").slideUp(200);
  $("nav .selected").removeClass("selected");
});

nav {
  background: #f0f7fa;
  color: #85a0ad;
  margin: 40px -38px 0 -38px;
  padding: 10px 38px;
}
nav table {
  border-collapse: collapse;
  width: 100%;
}
nav td {
  padding: 0;
  position: relative;
}
nav > td > a {
  display: block;
  color: #f0f7fa;
  position: relative;
  text-decoration: none;
}
nav > td.selected > a {
  z-index: 2;
}
nav td div {
  position: relative;
}
nav li div {
  position: relative;
}
nav td div div {
  background-color: #f0f0f0;
  padding: 12px 0;
  display: none;
  font-size: 0.95em;
  margin: 0;
  position: absolute;
  top: -1px;
  z-index: 1;
  width: 190px;
}
nav td div div.wrp2 {
  width: 380px;
}
nav .sep {
  left: 190px;
  border-left: 1px solid #044a4b;
  bottom: 0;
  height: auto;
  margin: 15px 0;
  position: absolute;
  top: 0;
  width: 1px;
}
nav td div ul {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  width: 170px;
  float: left;
  list-style-type: none;
}
nav td div ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul {
  padding: 0 0 8px;
}
nav td ul ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul li a {
  color: #044a4b;
  display: block;
  margin-bottom: 1px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 1.1em;
}
nav td ul ul li a:hover {
  background-color: #85a0ad;
  color: #fff;
}
nav td.gap {
  width: 33%;
}
nav.top {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
  <table>
    <tr>
      <td>&#x25BE;&nbsp;<a href="#" class="clicker">Lectures</a>
        <div class="subs">
          <div class="wrp2">
            <ul class="navul">
              <li>
                <h4>Intros</h4>
                <ul>
                  <li><a class=lecture href="lecture00.html">Introduction</a>
                  </li>
                </ul>
              </li>
              <li>
                <h4>Graph<span class="full-nav">&nbsp;Theory</span></h4>
                <ul>
                  <li><a class=lecture href="lecture01.html">Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture02.html">Beyond Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture03.html">Hamiltonian Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture04.html">Travelling Salesmen</a>
                  </li>
                  <li><a class=lecture href="lecture05.html">Minimum Cost&mdash;Spanning Trees</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <td class="gap">&nbsp;
          <td>&equiv;&nbsp;<a href="#">Course<span class="full-nav">&nbsp;Info</span></a>
    </tr>
  </table>
</nav>

我还想在页面底部放置相同的菜单，可点击的菜单向上而不是向下。我看过this post，但它是关于一个菜单在悬停时打开，而我的打开只需点击一下。我对几件事感到困惑：

1. 我应该把CSS中的“position：absolute; bottom：100％”放在哪里？
2. 当菜单向上打开时，如何更改slideUp / slideDown调用？
3. 如何防止一个菜单干扰另一个菜单？ [我的意思是，在我早期的尝试中，单击底部菜单会立即关闭，因为jQuery代码正在执行slideUp然后slideDown，但也许这不是问题。]

Answer 1

请参阅此处的小提琴：http://jsfiddle.net/h5fjwju6/

稍微更新您的CSS，进行.top课程设置和.bottom课程设置。你的任何jQuery都没有变化！...

HTML更新：

<!-- Just add another nav with class bottom, below your current top nav -->

<nav class="bottom">
   <table>
     <tr>
       ...

CSS更新：

nav {
   background: #f0f7fa;
   color: #85a0ad;
   margin: 40px -38px 0 -38px;
   padding: 10px 38px;
   position:fixed;     // <-- added this
}

nav td div div {
   background-color: #f0f0f0;
   padding: 12px 0;
   display: none;
   font-size: 0.95em;
   margin: 0;
   position: absolute;
   //top: -1px;              <-- removed this
   z-index: 1;
   width: 190px;
}
nav.top {                 // <-- added this   
   top: 1px;              
}
nav.top td div div  {     // <-- added this
   top: 1px;             
}
nav.bottom {              // <-- added this 
   bottom: 0px;           
}  
nav.bottom td div div {   // <-- added this   
   bottom: 25px;   
}    

Answer 2

尝试在图标

处添加span标记

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
  <table>
    <tr>
        <td><span class="icon">&#x25BE;</span>&nbsp;<a href="#" class="clicker">Lectures</a>
        <div class="subs">......

添加此CSS：

td.selected span.icon{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display:inline-block;
}

check out this