我有一个导航栏,在移动设备上它会溢出,人们可以看到他们需要向右或向左滚动的所有选择。我想添加带箭头的按钮,这样当人们点击例如右边的按钮时,nabber 就会自行向右滑动。
我试过 jQuery
$('#admin-menu').animate({width:'toggle'},350);
or
$(#admin-menu).show("slide", { direction: "left" }, 1000);
or
$('#admin-menu').slideToggle( "slow" );
但这一切似乎都无法按照我的意愿工作,它让 nabber 消失了。
带 slider 的菜单栏
<nav id="admin-menu">
<span class="tab active" id="locations-tab">
<h6>Dashboard</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
</nav>
//The button to slide
<i class="fas fa-chevron-circle-right right-slider" onClick="slider()"></I>
函数
function slider(){
console.log('Im here!!')
$('#admin-menu').animate({width:'toggle'},50);
}
我希望能够单击按钮并让导航栏向左滚动。
最佳答案
希望对您有所帮助。
$(".left-slider").click(function(){
$('#admin-menu').animate({width:'hide'},1000);
});
$(".right-slider").click(function(){
$('#admin-menu').animate({width:'show'},1000);
});
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="admin-menu">
<span class="tab active" id="locations-tab">
<h6>Dashboard</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
<span class="tab" id="users-tab">
<h6>Users</h6>
</span>
</nav>
<i class="fas fa-chevron-circle-left left-slider"></i>
<i class="fas fa-chevron-circle-right right-slider"></i>
关于javascript - 单击时向右和向左滑动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55601709/