如何让我的导航 link 的子列表项显示在它的右侧?
How can get my nav link's sublist items to show on the right of it?
我正在尝试让我的导航 link 的子项从 link 的右侧弹出,而不是使用基础 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
});
你可以试试这个。
将 .collections
添加到 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
});
.collections{
position:relative;
}
.collections ul{
position:absolute;
top:0;
margin-left: 7rem;
}
<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>
希望对您有所帮助。
我正在尝试让我的导航 link 的子项从 link 的右侧弹出,而不是使用基础 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
});
你可以试试这个。
将 .collections
添加到 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
});
.collections{
position:relative;
}
.collections ul{
position:absolute;
top:0;
margin-left: 7rem;
}
<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>
希望对您有所帮助。