可点击的下拉菜单

Question

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

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

$("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，但它是关于悬停时打开的菜单，而我的是单击打开的。我对几件事感到困惑：

我应该把 "position: absolute; bottom: 100%" 放在 CSS 的什么地方？
当菜单向上打开时，我应该如何更改 slideUp / slideDown 调用？
如何防止一个菜单干扰另一个菜单？ [我的意思是，在我早期的尝试中，单击底部菜单会立即自行关闭，因为 jQuery 代码是先 slideUp 然后再 slideDown，但这也许不是问题。]

Answer 1

尝试在图标处添加 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

Answer 2

请参阅此处 fiddle：http://jsfiddle.net/h5fjwju6/

只需稍微更新一下您的 CSS，即可获得 .top class 设置和 .bottom class 设置。您的任何 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;   
}

可点击的下拉菜单

A clickable drop-up menu

html

css

jquery

drop-down-menu