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

Question

我正在尝试创建一个选项卡式菜单，该菜单在移动屏幕上变为 Accordion 式菜单。它正在工作，但事件的 Accordion 菜单(按钮)在第二次单击时不会折叠。它只会在单击其他菜单时折叠。我认为创建该行为的 JS 代码不起作用。只有 CSS 的媒体查询似乎有效。

我尝试使用 using 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);
});

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

Answer 1

请根据我检查一下您的手 secret 码无法正常工作。

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: '\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;
}

}

}

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