怎样用jquery实现点击一个按钮控制一个div的显示和隐藏

页面代码：
 
   
   

  
    
    
     
     商品列表
    
    
   
    
    
 
   	
     
     

      
      西红柿炒蛋
     
     
 
		
     
     

		  
      
      鸡蛋 x1
		  
      
      番茄 x2
		
     
     
    
     
     

      
      辣椒炒肉
     
     
 
		
     
     

         
      
      辣椒 x1
		 
      
      肉   x2
	    
     
     
  
    
    
 
   
   
 
 Jquery代码
 方法一：
  <script>
   $(function(){
   
     $(".list-item input").click(function(){
        //获取一个坐标
        var listItem=$('.list-item input').index(this);
        //根据坐标找到要操作的div,添加toggle();事件
        $('.list-item-product').eq(listItem).toggle();
      });
   })
</script>
方法二：
 <script>
   $(function(){
    $(".list-item input").click(function(){
         //获取一个坐标
        var listItem=$('.list-item input').index(this);
        //根据坐标找到要操作的div
	    var $this=$('.list-item-product').eq(listItem);
	    //根据属性判断div显示还是隐藏
        $this.css("display") === "none" && $this.show() || $this.hide();
       });
   });
   </script>