【发布时间】：2019-04-30 19:29:54
【问题描述】：
我正在尝试创建一个选项卡式菜单，该菜单可以在移动屏幕上更改为手风琴式菜单。它正在工作，但第二次单击时活动的手风琴菜单（按钮）不会折叠。只有单击其他菜单时它才会折叠。我认为创建该行为的 JS 代码不起作用。只有 CSS 的媒体查询似乎有效。
我尝试过使用 jQuery collapse 和 window.matchMedia，但没有成功。
HTML
<div class="container">
<ul class="nav tabs">
<li><a class="tab" href="#tab1">Tab 1</a></li>
<li><a class="tab" href="#tab2">Tab 2</a></li>
</ul>
<a class="accordion button" href="#tab1">Tab 1</a>
<div id="tab1" class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<a class="accordion button" href="#tab2">Tab 2</a>
<div id="tab2" class="panel">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS
.container {
margin: 5% 20%;
background: #e5e5e5;
padding: 30px;
border-radius: 5px;
}
.accordion {
display: none ;
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
margin-bottom: 20px;
}
ul.nav a {
padding: 10px;
margin-right: 10px;
float: left;
display: block;
margin: 15px 10px 0 0;
cursor: pointer;
padding: 10px 15px;
line-height: 42px;
border-bottom: 2px solid #888;
background: #f7f7f7;
}
ul.nav a {
color: #888;
text-decoration: none;
transition: all .3s ease-out;
}
ul.tabs a:hover {
background: #37474f;
border-bottom: solid 3px #009193;
color: #fff;
}
ul.tabs a.selected {
background: #37474f;
border-bottom: solid 3px #009193;
color: #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}
span a {
color: #009193;
text-decoration: none;
}
@media screen and (max-width: 468px) {
.tabs {
display: none;
}
.accordion {
display:block !important;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
}
}
JS
这是唯一用于深层链接选项卡式内容的代码，以便在超链接到其他页面时打开特定选项卡。
var target = null;
var $panels = $('#panels');
// collect all the tabs
var tabs = $('.tab').on('click', function() {
target = $(this.hash).removeAttr('id');
if (location.hash === this.hash) {
setTimeout(update, 0);
}
});
var targets = tabs.map(function() {
return this.hash;
}).get();
var panels = $(targets.join(',')).each(function() {
$(this).data('old-id', this.id);
});
function update() {
if (target) {
target.attr('id', target.data('old-id'));
target = null;
}
var hash = window.location.hash;
if (targets.indexOf(hash) !== -1) {
show(hash);
}
}
function show(id) {
if (!id) {
id = targets[0];
}
tabs.removeClass('selected').filter(function() {
return (this.hash === id);
}).addClass('selected');
panels.hide().filter(id).show();
}
$(window).on('hashchange', update);
if (targets.indexOf(window.location.hash) !== -1) {
update();
} else {
show();
}
//For accordion
(function($){
const mq = window.matchMedia("(max-width:500px)");
mq.addListener(widthChange);
widthChange(mq);
function widthChange(mq) {
var allPanels = $('.panel').hide();
if (mq.matches) {
$('.accordion').click(function()
{
$(this).toggleClass( "toggle" );
allPanels.slideUp();
$(this).next('.panel').show();
});
}
}
// On load
widthChange(mq);
});
我希望手风琴菜单在单击时切换、打开/关闭。
【问题讨论】：
标签： javascript jquery html css