Question

我试图让我的导航链接的子项从链接的右侧弹出，而不是使用基础的jQuery从它下面滑动。

<ul class="side-nav">
  <li><a href="#">Collections</a>
    <ul>
      <li><a href="#">Autos</a></li>
      <li><a href="#">Models</a></li>
      <li><a href="#">Nature</a></li>
      <li><a href="#">Extreme Sports</a></li>
    </ul>
  </li>
</ul>

jQ文件：

$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
  $(this).toggleClass( "active" ) // add active class to clicked menu item
  $(this).children('ul').slideToggle(); //toggle submenu
});

Answer 1

您可以尝试这样做。

将li添加到position: absolute;，然后对其子项应用$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu $('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child $('.side-nav li:has("ul")').click(function(){ $(this).toggleClass( "active" ) // add active class to clicked menu item $(this).children('ul').slideToggle(); //toggle submenu });样式。

＆＃13;

.collections{
  position:relative;
}

.collections ul{
  position:absolute;
  top:0;
  margin-left: 7rem;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>

<ul class="side-nav">
      <li class="collections"><a href="#">Collections</a>
        <ul>
          <li><a href="#">Autos</a></li>
          <li><a href="#">Models</a></li>
          <li><a href="#">Nature</a></li>
          <li><a href="#">Extreme Sports</a></li>
        </ul>
      </li>
     </ul>

＆＃13;

var express = require('express');
var handlebars = require('express-handlebars');    
var app = express();

app.engine('handlebars', handlebars({
    helpers: {
        sayHello: function () { return "Hello"; },
        getStringifiedJson: function (value) {
            return JSON.stringify(value);
        }
    },
partialsDir: ['views/partials/'],
defaultLayout: 'main'
}));
app.set('view engine', 'handlebars');

＆＃13;

希望这有帮助。

如何让我的导航链接的子列表项目显示在右侧？

1 个答案: