Question

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

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

Answer 1

这是你想要实现的目标吗？

$(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>

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

1 个答案: