div 在点击时显示，但在第二次点击时不使用 CSS 和 Jquery 隐藏，不使用按钮，而是使用 <li> 标记中的类答案

【问题标题】：Div showing on click, but not hiding on second click with CSS and Jquery, not using buttons, but classes in <li> tagesdiv 在点击时显示，但在第二次点击时不使用 CSS 和 Jquery 隐藏，不使用按钮，而是使用 <li> 标记中的类
【发布时间】：2016-03-21 07:01:12
【问题描述】：

这是我的代码...所以首先如果你点击菜单，<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------------>

【问题讨论】：

为什么你在每次点击绑定时都重复jQuery(document).ready(function(){，你可以在一个块中移动所有绑定；
直接使用toggle而不是切换类

标签： jquery css show-hide

【解决方案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;


  }
});

});

【讨论】：