jquery - Div 在点击时显示，但在使用 CSS 和 Jquery 第二次点击时不隐藏，不使用按钮，而是 <li> 标签中的类

Question

这是我的代码...所以首先如果你点击菜单，<ul>出现时，每个 li 都有一个分配的类，然后应该打开一个向下滑动的部分，并在单击时向上滑动。这只是目前正在下滑...悲伤的脸...我是 Jquery 的新手，所以请保持温柔...:) ...我也不想更改太多我的代码，因为我可能只是如果我这样做会再次卡住...如果可能的话...谢谢!

jQuery(document).ready(function(){
	    jQuery(".menu-trigger").click(function() {
		    $(".menu-trigger").hide("scale")
		    jQuery(".test").slideToggle(900, function ([complete]){
			    jQuery(this).toggleClass(".test").css("display");
	})	
		});
	});
    jQuery(document).ready(function(){
	jQuery(".bio-button").click(function() {
		jQuery(".bio-content").slideToggle(900, function ([complete]){
			jQuery(this).toggleClass(".bio-content").css("display");
	})	
		});
	});
    jQuery(document).ready(function(){
	jQuery(".drums-button").click(function() {
		jQuery(".drums-content").slideToggle(900, function ([complete]){
			jQuery(this).toggleClass(".drums-content").css("display");
	})	
		});
	});
    jQuery(document).ready(function(){
	jQuery(".info-button").click(function() {
		jQuery(".info-content").slideToggle(900, function ([complete]){
			jQuery(this).toggleClass(".info-content").css("display");
	})	
		});
	});
    function changeImage(){
		var ima = document.getElementById("BSlate");
			if (ima.src.match('BIDSlate')){
				(ima.src ="img/BSlate.png").fadeIn(1200);
    }
    else
		(ima.src ="img/BIDSlate.png").fadeIn(1200);
    }

.bio-content{
	height:400px;
	background-color:rgba(255,255,255,0.5);
	width:100%;
	display:none;
	margin:0;
	padding:0;
    }
    .info-content{
	height:800px;
	background-color:rgba(0,0,0,0.5);
	width:100%;
	display:none;
	margin:0;
	padding:0;
    }
    .drums-content {
	height:400px;
	background-color:rgba(255,255,255,0.5);
	width:100%;
	display:none;
	margin:0;
	padding:0;
    }

<!-------------- MY HTML -------------------->

    <div id="menuwrapper"><!-----------MENU START------------>
	<img id="BSlate" src="img/BSlate.png" style="max-width:100%" />
    </div>
    <div class="test">
    	<ul>
        	<li class="bio-button">Biography</li>
            <li class="info-button">Info</li>
            <li class="drums-button">Drums</li>
        </ul>
            <div class="bio-content"></div>
            <div class="info-content"></div>
            <div class="drums-content"></div>
    </div>
    <span class="menu-trigger" onclick="changeImage()"><h1 class="menu-button">MENU</h1></span><!-----------END MENU------------>




    

Answer 1

你可以试试这个..请检查https://jsfiddle.net/26ako4Lp/1/

jQuery

$.noConflict();
jQuery(document).ready(function(){

jQuery('.test > ul').on('click','li',function(){
    var itm=jQuery(this).attr('class');
  console.log(itm);

  switch(itm){
  case 'bio-button':
  jQuery('.bio-content').slideToggle('slow');
  break;

  case 'info-button':
  jQuery('.info-content').slideToggle('slow');
  break;

  case 'drums-button':
  jQuery('.drums-content').slideToggle('slow');
  break;


  }
});

});