Question

我有一个要求创建导航菜单标签，每个标签都有子标签，如下拉菜单。每当我点击每个标签时，应显示相应的内容（同样适用于子标签）。我正面临css问题如何正确显示与菜单相关的子标签，还需要在点击它时显示子标签相关内容。任何人都可以帮我这个吗？

＆＃13;

$(document).ready(function(){


    $('ul#myNavUl li').on("click", (function(e) {   
   // Add selected class to clicked tab
   $(this).addClass('selected').siblings().removeClass('selected');
   
   // Determine selected li index in respect to parent ul
   var tabIndex = $(this).index();
   
   // Find article respective to selected tab
   var article = $(this).closest('.content').find('.articles').children().eq(tabIndex);
   
   // Add selected class to respective article
   article.addClass('selected').siblings().removeClass('selected');

    var parentH = $('ul#myNavUl li ul').parent().height();
    
    $('ul#myNavUl li ul').css('top', parentH);
    $('ul#myNavUl li ').hover(function(){
      $('ul', this).show();
    }, function(){
      $('ul', this).hide();
    });



}));

});

＆＃13;

body {
  background-color: #333;
  font-family: "Open Sans Condensed";
  margin: 0;

}

.content {
  width: 100%;
  margin: 0 auto;
  padding: 12px;
}

.article {
  display: none;
  margin: 100px auto 0;
  width: 1024px;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.article.selected {
  display: block;
}
.article h2, .article p {
  color: #2a2a2a;
}

ul#myNavUl {
  list-style: none;
  text-align: center;
  color: #fff;
}

ul#myNavUl li {
  position: relative;
  width: 15%;
  margin: 0 4px;
  padding: 15px;
  float: left;
  background-color: #0077bb;
 
}
ul#myNavUl li:hover {
  background-color: #00aaee;
}
ul#myNavUl li.selected {
  background-color: #00aaee;
}
ul#myNavUl li.selected::after {
  position: absolute;
  display: block;
  width: 0;
  bottom: -15px;
  left: calc(50% - 15px);
  content: "";
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #00aaee transparent;
}

ul#myNavUl li a{
  text-decoration: none;
  color: white;
}

ul#myNavUl li ul{
      position:absolute;
        left:0;
      display:none;
    }

＆＃13;

<div class="content">
  <div class="tabs">
    <ul id="myNavUl">
      <li class="selected">Tab 1</li>
      <li><a href="#">Tab 2</a></li>
      <li><a href="#">Tab 3</a></li>
      <li><a href="#">Tab 4</a>
             <ul><!-- added drop-down items -->
                 <li><a href="#son-of-tab3" >drop-down 1</a></li> 
                 <li><a href="#son-of-tab3" >drop-down 2</a></li> 
                 <li><a href="#son-of-tab3" >drop-down 3</a></li> 
             </ul>
      </li>
    </ul>
  </div>
  <div class="articles"> 
    <div class="article selected">
      <h2>Article 1</h2>
    </div>
    <div class="article">
      <h2>Article 2</h2>
    </div>
    <div class="article">
      <h2>Article 3</h2>
    </div>
    <div class="article">
      <h2>Article 4</h2>
    </div>
    <div class="article">
      <h2>Article 5</h2>
    </div>
  </div>
</div>

＆＃13;

Answer 1

我为你制作了一个带有标签和屏幕的容器，如果你想要的话，请告诉我。

<强> HTML：

<div id="tp--nav-bar">
  <ul id="nav-bar--list">
    <li class="controler">
      <a>home</a>
      <ul class="screen">
        <li><a>page</a></li>
        <li><a>page</a></li>
      </ul>
    </li>
    <li class="controler">
      <a>about</a>
      <ul class="screen">
        <li><a>page</a></li>
        <li><a>page</a></li>
      </ul>
    </li>
    <li class="controler">
      <a>gallery</a>
      <ul class="screen">
        <li><a>page</a></li>
        <li><a>page</a></li>
      </ul>
    </li>
    <li class="controler">
      <a>contact</a>
      <ul class="screen">
        <li><a>page</a></li>
        <li><a>page</a></li>
      </ul>
    </li>
  </ul>
</div>

<强> SCSS：

@mixin transition($ease, $s) {
  -webkit-transition: $ease $s;
     -moz-transition: $ease $s;
      -ms-transition: $ease $s;
      -o-transition:  $ease $s;
          transition: $ease $s;
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x,$y);
     -moz-transform: translate($x,$y);
      -ms-transform: translate($x,$y);
       -o-transform: translate($x,$y);
          transform: translate($x,$y);
}


#nav-bar--list {
  font-family: 'Raleway', sans-serif;
  > li {
    cursor: pointer;
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #00aaee;
    color: #fff;
    overflow: hidden;
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  > li.active {
    background: #007eb1;
    overflow: visible;
  }
  > li:hover {
    background: #007eb1;
  }
}

.screen {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  line-height: 40px;
  text-align: center;
  background: #00aaee;
  color: #fff;
  z-index: -1;
  opacity: 0;
  @include translate(0px, 50px);
  @include transition(cubic-bezier(0.4, 0.1, 0, 1.6), 0.45s);
     li:hover {
        background: #007eb1;
        a {
          color: #fff;
          text-decortion: none;
        }
     }
   }
.screen.active {
       z-index: 1;
       opacity: 1;
       @include translate(0px, 0px);
}

<强> jQuery的：

$(document).ready(function() {
  tabPanel('#tp--nav-bar')
});


function tabPanel(element) {

  var container = $(element),
    controlers = container.find('.controler'),
    screens = container.find('.screen'),
    map = {};

  for (i = 0; i < controlers.length; i++) {

    var control = controlers[i],
      screen = screens[i],
      controler = 'controler-' + i,
      screener = 'screener-' + i;

    $(control).attr('id', controler);
    $(screen).attr('id', screener);

    map[controler] = screener;
  };

  controlers.click(function() {

    var controlerId = $(this).attr('id'),
      controlerClass = $(this).attr('class'),
      controlerClass = controlerClass.indexOf('active');

    if (controlerClass == -1) {

      controlers.removeClass('active');

      screens.removeClass('active');

      $('#' + map[controlerId]).addClass('active');

      $('#' + controlerId).addClass('active');

    }

  });

}

My Fiddle

Answer 2

我检查了你的代码并查看了浏览器的控制台;它有一个jQuery错误，如$未定义。我想你忘了添加jQuery库;就是这种错误发生的方式。添加jQuery文件或者您也可以使用jQuery cdn。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

在</body>标记之前添加此行添加，然后检查它是否有效。

导航菜单下拉jquery中的选项卡

2 个答案: