我需要一些帮助,在响应时将侧边栏按钮变为下拉列表。这个侧边栏(左侧)靠近这个网站:http://www.isoentertainmentinfo.com/
如果可能,可以这样做,当它变成下拉列表时,只显示活动按钮,当你点击该活动下拉列表时,其他人会显示?与上面的网站有什么关系,但在我的情况下,按钮在点击时被更改为活动状态,而不是加载一个全新的页面。
以下是我的链接:
<div class="buttonRow">
<ul class="btn">
<label for="drop" class="toggle">Active Link Here</label> ***display only upon dropdown***
<button class="btnAbt2"><li> Link 1 </li></button>
<button class="btnAbt2"><li> Link 2 </li></button>
<button class="btnAbt2"><li> Link 3 </li></button>
<button class="btnAbt2"><li> Link 4 </li></button>
<button class="btnAbt2"><li> Link 5 </li></button>
</ul>
</div>
我已经点击了添加活动课程。我只需要将活动类作为唯一显示为下拉列表主文本的类。
这是一个更清晰的视觉示例,here
非常感谢你。我感谢所有的帮助。
答案 0 :(得分:0)
这是你想要实现的目标吗?
$(document).ready(function(){
$('.toggle').on('click', function(){
$('button').toggle();
});
// set a varable for text
var $text;
$('.btnAbt2').click(function(){
// get the text from the link clicked
$text = $(this).text()
$('.btnAbt2').removeClass('active'); $(this).addClass('active');
// update the lable text
$('.toggle').text($text);
});
});
.buttonRow {
width: 100%;
}
.btn {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.toggle {
width: 100%;
padding: 5px;
background: red;
display: block;
}
button {
width: 100%;
padding: 5px;
background: #CCC;
display: none;
border: 0;
}
@media screen and (min-width: 500px) {
.toggle {
display: none;
}
button {
width: auto;
float: left;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="buttonRow">
<ul class="btn">
<label for="drop" class="toggle">Active Link Here</label>
<button class="btnAbt2"><li> Link 1 </li></button>
<button class="btnAbt2"><li> Link 2 </li></button>
<button class="btnAbt2"><li> Link 3 </li></button>
<button class="btnAbt2"><li> Link 4 </li></button>
<button class="btnAbt2"><li> Link 5 </li></button>
</ul>
</div>