Question

这对你们来说应该很容易，但我是一个真正的初学者。需要它只是向我解释。我认为它也会帮助很多像我这样刚开始玩jquery的人......

我正在构建一个网站，需要在其中一个页面上有一个按钮，点击它时不仅隐藏了一些内容（其中有大量的解决方案），但同时显示以前隐藏的内容内容的分歧。

我需要知道将要执行此操作的jquery＆amp;我需要包围按钮来引发jquery。

你可以帮帮我吗？

谢谢，斯图。

Answer 1

如果您只关心两个div元素，jQuery.toggle()支持两个事件处理函数：

$('button').toggle(function(){
       $('div1').hide();
       $('div2').show();
},function(){
       $('div1').show();
       $('div2').hide();
});

这应该可以确保一个div具有css属性display:none而另一个div不具有（可见）。

Answer 2

在成功的ajax调用中，你必须编写你必须隐藏的div以及你必须显示的div。

$.ajax({          

       url: "Sevlet",
       type: 'POST',    
       dataType: "json",
       data:{"id":id},
       contentType:"application/x-www-form-urlencoded",       
       success: function (data) {

                  $("#div1").hide();
                  $("#div2").show();
             }
});

Answer 3

首先，jQuery只是一个用来做东西的函数库。

所以像hide（）和show（）之类的inbulit函数可以用来做你想做的事情。我相信下面链接上关于jQuery for hide / show / hide_show的文档很容易理解，你几乎没有问题。
http://api.jquery.com/hide/
http://api.jquery.com/show/
http://www.w3schools.com/jquery/jquery_hide_show.asp

但是，另一种解决问题的方法是使用jQuery方法切换CSS属性，这将导致基于css属性显示或隐藏div元素。我将展示它的高度属性，但也可以使用其他几个，包括最大高度，左，右，顶部，底部等。

改变CSS中的属性，我可以看到Div是如何可见或隐藏的

示例：

<html>
   <head>
      <style>
          .Div_I_Want_To_Show{
               background: #ffe400;
               width:100%;
               height:0px;
               overflow:auto;
          }
      </style>
   </head>
   <body>
      <div class="Div_I_Want_To_Show">
          <p>Some Random Text Here</p>
      </div>
      <button class="btn">Click to See Content</button>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script>
           $(".btn").click(function(){
               $('.Div_I_Want_To_Show').css('height','20em')
           });
      </script>
   </body>
</html>

小提琴链接：https://jsfiddle.net/L7pmarzh/

如果你想知道，你也可以为它设置动画，我猜你想要任何网站，因为简单的隐藏和显示效果对任何用户都没有吸引力。

希望这能解决您的问题：）

隐藏一个div并通过单击一个按钮显示另一个div

3 个答案: