在下拉列表中显示设置为有效的按钮?

时间:2017-11-29 21:50:32

标签: javascript jquery html css drop-down-menu

我需要一些帮助,在响应时将侧边栏按钮变为下拉列表。这个侧边栏(左侧)靠近这个网站: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

非常感谢你。我感谢所有的帮助。

1 个答案:

答案 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>