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

时间：2019-04-30 19:29:55

标签： javascript jquery html css

我正在尝试创建一个选项卡式菜单，该菜单式菜单在移动屏幕上变为手风琴菜单。它正在工作，但是活动的手风琴菜单（按钮）在第二次单击时不会折叠。如果单击其他菜单，它将仅折叠。我认为创建该行为的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);
});

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

1 个答案:

答案 0 :(得分：0)

请根据我的意见进行检查，您的手机代码不起作用。 

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>

相关问题
最新问题