将选项卡更改为折叠 - 折叠菜单不会在单击时折叠

Question

>我正在尝试创建一个选项卡式菜单，该菜单在移动屏幕上更改为手风琴菜单。它正在工作，但活动的手风琴菜单(按钮(在第二次单击时不会折叠。仅当单击其他菜单时，它才会折叠。我认为创建该行为的 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: '02B';
    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);
});

我希望手风琴菜单在单击时切换、打开/关闭。

Answer 1

请根据我检查您的手机代码不起作用。

if ($(window).width() >500) {
		 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();
    }
	}
	
	else{
		var allPanels = $('.panel').hide();
		
		$('.accordion').click(function()
							  
          {
           //alert("test");     
		   $(this).toggleClass( "toggle" ); 
                    allPanels.slideUp();
                    $(this).next('.panel').show();
                });
	}
	
	
	
	

.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: '02B';
    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;
}
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>