Question

我必须使用导航菜单的日期打开子菜单，以便显示其匹配的链接。我不能改变HTML。我对使用＆＃34;数据相关面板＆＃34;以及如何做到这一点没有任何想法。有人帮帮我吗？

<!-- nav menu -->
<nav>
      <ul>
        <li><a href="#" data-related-panel="space">Space</a></li>
        <li><a href="#" data-related-panel="earth">Earth Science</a></li>
        <li><a href="#" data-related-panel="technology">Technology</a></li>
        <li><a href="#" data-related-panel="physics">Physics</a></li>
        <li><a href="#" data-related-panel="gallery">Gallery</a></li>
      </ul>
</nav>

<!-- dropdown -->
<div id="dropdown">

    <section id="space" class="nav-panel">
      <ul>
        <li><a href="#">Missions</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Aeronautics</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">History</a></li>
      </ul>
    </section>

    <section id="earth" class="nav-panel">
      <ul>
        <li><a href="#">Geology</a></li>
        <li><a href="#">Oceanography</a></li>
        <li><a href="#">Meteorology</a></li>
        <li><a href="#">Weather</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </section>

    <section id="technology" class="nav-panel">
      <ul>
        <li><a href="#">Music</a></li>
        <li><a href="#">Machines</a></li>
        <li><a href="#">Computers</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </section>

    <section id="physics" class="nav-panel">
      <ul>
        <li><a href="#">Relativity</a></li>
        <li><a href="#">Quantum mechanics</a></li>
        <li><a href="#">Electromagnetism</a></li>
        <li><a href="#">Thermodynamics</a></li>
      </ul>
    </section>

    <section id="gallery" class="nav-panel">
      <ul>
        <li><a href="#">Featured Photos</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Contests</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Shoes</a></li>
      </ul>
    </section>

</div>

JSFIDDLE

Answer 1

当您点击nav中的锚点时，请抓住数据属性并将其用作您要显示的面板的ID。

$('nav li a').on('click', function(){
  var relatedPanel = $(this).data('related-panel');
  $('#' + relatedPanel).show(); 
});

DEMO

Answer 2

在你的jQuery中，你需要做

>>> template = '{} {{}} {{{{}}}}'
>>> template.format('foo')
'foo {} {{}}'
>>> template.format('foo').format('bar')
'foo bar {}'
>>> template.format('foo').format('bar').format('baz')
'foo bar baz'

而不是与数据相关的空间。

Answer 3

这是您更新的工作代码，替换javascript函数，它将工作。

＆＃13;

$(document).ready(function(){

 $('[data-related-panel]').click( function(){
 
 	var target = $(this).data('related-panel');
    $('#dropdown').find('section').hide();
 	$("#"+target).show();
 });

});

＆＃13;

nav{
  background: red;
  padding: 10px;
}

nav ul li{
  display: inline-block;
}

nav ul li a{
  color: white;
}

.nav-panel{
  display: none;
}

#dropdown{
  background: blue;
}

#dropdown li{
  display: inline-block;
}

#dropdown li a{
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- nav menu -->
<nav>
      <ul>
        <li><a href="#" data-related-panel="space">Space</a></li>
        <li><a href="#" data-related-panel="earth">Earth Science</a></li>
        <li><a href="#" data-related-panel="technology">Technology</a></li>
        <li><a href="#" data-related-panel="physics">Physics</a></li>
        <li><a href="#" data-related-panel="gallery">Gallery</a></li>
      </ul>
</nav>

<!-- dropdown -->
<div id="dropdown">
    <section id="space" class="nav-panel">
      <ul>
        <li><a href="#">Missions</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Aeronautics</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">History</a></li>
      </ul>
    </section>
    <section id="earth" class="nav-panel">
      <ul>
        <li><a href="#">Geology</a></li>
        <li><a href="#">Oceanography</a></li>
        <li><a href="#">Meteorology</a></li>
        <li><a href="#">Weather</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </section>
    <section id="technology" class="nav-panel">
      <ul>
        <li><a href="#">Music</a></li>
        <li><a href="#">Machines</a></li>
        <li><a href="#">Computers</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </section>
    <section id="physics" class="nav-panel">
      <ul>
        <li><a href="#">Relativity</a></li>
        <li><a href="#">Quantum mechanics</a></li>
        <li><a href="#">Electromagnetism</a></li>
        <li><a href="#">Thermodynamics</a></li>
      </ul>
    </section>
    <section id="gallery" class="nav-panel">
      <ul>
        <li><a href="#">Featured Photos</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Contests</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Shoes</a></li>
      </ul>
    </section>
  </div>

＆＃13;

下拉菜单使用数据 - 显示子菜单

3 个答案: