javascript - 单击列表项无法显示下拉内容

Question

我正在我的 HTML 页面的左侧边栏上工作。我的左侧边栏有一些文本，如果我们单击它们，它们应该会下拉并显示一些其他文本:

这是我的 jsfiddle:https://jsfiddle.net/g2ahx6nq/40/

我有以下这些文字:

• 我们的基因
• 元素
• 研究
• 故事

因此，如果我单击左侧栏中的上述任何文本，它应该会下拉并显示属于它们的其他文本。从技术上讲，它应该像这张图片:https://s3.postimg.org/gbxn8hkf7/home1.png

如您在左侧边栏(上图中)中所见，是上述每个文本的扩展版本。我必须按原样匹配颜色和字体。下面是我用于左栏导航的 HTML 代码，但不知何故我的点击根本不起作用，也无法匹配字体和大小。我也缺少下拉箭头。

<div id="leftBar">
    <br />

    <svg id="clippedImg" width="0" height="0">
        <clipPath id="clipPolygon">
            <polygon points="1 100%,131 100%,130 0,0 0">
            </polygon>
        </clipPath>
    </svg>
    <nav>
        <ul>
            <li class="dropdown">
                <a href="#">OUR DNA</a>
                <ul class="dropdown-content">
                    <li><a href="#"><i>RISK</i></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">PROGRAMS</a>
                <ul class="dropdown-content">
                    <li><a href="#"><i>PROFESSIONAL</i></a></li>
                    <li><a href="#"><i>ADVENTURE SPORT</i></a></li>
                    <li><a href="#"><i>ENTERTAINMENT</i></a></li>
                    <li><a href="#"><i>COLLEGIATE</i></a></li>
                    <li><a href="#"><i>INDIVIDUAL</i></a></li>
                    <li><a href="#"><i>COMMERCIAL</i></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">RESEARCH</a>
                <ul class="dropdown-content">
                    <li><a href="#"><i>CORPORATE SURVEY</i></a></li>
                    <li><a href="#"><i>INDIVIDUAL SURVEY</i></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">STORIES</a>
            </li>               
        </ul>
    </nav>
</div>

这是我的 CSS:

nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

nav ul li {
    display:inline-block;
    position:relative;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  display: block;
  width: 80px;
}

nav ul li a:hover {
  background: #00648C;
}

ul.dropdown-content {
  position: absolute;
  display: none;
}

我的点击不起作用是怎么回事？我们如何匹配字体、颜色？

Answer 1

已更新

试试这个 fiddle https://jsfiddle.net/jgf90mh9/18/

 $(document).ready(function(){
    $(".dropdown a").click(function(){
        $(this).closest('.dropdown').find('.dropdown-content').slideToggle(200);
        $(this).closest('.dropdown').siblings('.dropdown').find('.dropdown-content').slideUp(200);
    });
 });