blocks|key|1581794|text|你可以写一个简单的jQuery插件来做这件事。该插件将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1581795|(function($)+{
++++$.fn.expandcollapse+=+function()+{
++++++++return+this.each(function()+{
++++++++++++obj+=+$(this);
++++++++++++switch+(obj.css("display"))+{
++++++++++++++++case+"block":
++++++++++++++++++++displayValue+=+"none";
++++++++++++++++++++break;

++++++++++++++++case+"none":
++++++++++++++++default:
++++++++++++++++++++displayValue+=+"block";
++++++++++++}

++++++++++++obj.css("display",+displayValue);
++++++++});
++++};
}+(jQuery));|code-block|syntax|javascript|1581796|然后将插件连接到锚标签的click事件：|1581797|$(document).ready(function()+{
++++$("#mylink").click(function()+{
++++++++$("div").expandcollapse();
++++});
});|1581798|假设您将每个div的初始“display”属性分别设置为“block”和“none”，则当单击链接时，它们应该切换为显示/隐藏。|1581799|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You could write a simple jQuery plugin to do this.  The plugin would look like:</p>

<pre><code>(function($) {
    $.fn.expandcollapse = function() {
        return this.each(function() {
            obj = $(this);
            switch (obj.css("display")) {
                case "block":
                    displayValue = "none";
                    break;

                case "none":
                default:
                    displayValue = "block";
            }

            obj.css("display", displayValue);
        });
    };
} (jQuery));
</code></pre>

<p>Then wire the plugin up to the click event for the anchor tag:</p>

<pre><code>$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});
</code></pre>

<p>Providing that you set the initial 'display' attributes for each div to be 'block' and 'none' respectively, they should switch to being shown/hidden when the link is clicked.</p>


blocks|key|1581839|text|因为一个div最初是隐藏的，所以您可以简单地为两个div调用toggle：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1581840|<a+href="javascript:void(0);"+id="forgot-password">forgot+password?</a>
<div+id="login-form">login+form</div>

<div+id="recover-password"+style="display:none;">recover+password</div>

<script+type="text/javascript">
$(function(){
++$('#forgot-password').click(function(){
+++++$('#login-form').toggle();
+++++$('#recover-password').toggle();+
++});
});
</script>|code-block|syntax|javascript|1581841|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Effects/toggle^0|U|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Since one div is initially hidden, you can simply call <a href="http://docs.jquery.com/Effects/toggle" rel="noreferrer">toggle</a> for both divs:</p>

<pre><code>&lt;a href="javascript:void(0);" id="forgot-password"&gt;forgot password?&lt;/a&gt;
&lt;div id="login-form"&gt;login form&lt;/div&gt;

&lt;div id="recover-password" style="display:none;"&gt;recover password&lt;/div&gt;

&lt;script type="text/javascript"&gt;
$(function(){
  $('#forgot-password').click(function(){
     $('#login-form').toggle();
     $('#recover-password').toggle(); 
  });
});
&lt;/script&gt;
</code></pre>


blocks|key|1581864|text|我想你想要的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1581865|$('#recover-password').show();|code-block|syntax|javascript|1581866|或|1581867|$('#recover-password').toggle();|1581868|这是由jQuery实现的。|1581869|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think you want this:</p>

<pre><code>$('#recover-password').show();
</code></pre>

<p>or</p>

<pre><code>$('#recover-password').toggle();
</code></pre>

<p>This is made possible by jQuery.</p>


blocks|key|1366814|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1366815|<script+type="text/javascript"+language="javascript">
++++$("#toggle").click(function()+{+$("#login-form,+#recover-password").toggle();+});
</script>|code-block|syntax|javascript|1366816|您的HTML应该如下所示：|1366817|<a+id="toggle"+href="javascript:void(0);">forgot+password?</a>
<div+id="login-form"></div>
<div+id="recover-password"+style="display:none;"></div>|1366818|嘿，好吧！一句话！I+<3+jQuery。|1366819|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use this:</p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt;
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
&lt;/script&gt;
</code></pre>

<p>Your HTML should look like:</p>

<pre><code>&lt;a id="toggle" href="javascript:void(0);"&gt;forgot password?&lt;/a&gt;
&lt;div id="login-form"&gt;&lt;/div&gt;
&lt;div id="recover-password" style="display:none;"&gt;&lt;/div&gt;
</code></pre>

<p>Hey, all right! One line! I &lt;3 jQuery.</p>


blocks|key|1581916|text|我认为这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1581917|$(document).ready(function(){

++++//+Hide+(collapse)+the+toggle+containers+on+load
++++$(".toggle_container").hide();

++++//+Switch+the+"Open"+and+"Close"+state+per+click+then+
++++//+slide+up/down+(depending+on+open/close+state)
++++$("h2.trigger").click(function(){
++++++++$(this).toggleClass("active").next().slideToggle("slow");
++++++++return+false;+//+Prevent+the+browser+jump+to+the+link+anchor
++++});
});|code-block|syntax|javascript|1581918|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think this works:</p>

<pre><code>$(document).ready(function(){

    // Hide (collapse) the toggle containers on load
    $(".toggle_container").hide();

    // Switch the "Open" and "Close" state per click then 
    // slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; // Prevent the browser jump to the link anchor
    });
});
</code></pre>


blocks|key|1366832|text|试试这个：http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1366833|ََََََََََََََََََََََََََََََََََََََََََََََََ|1366834|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/^0|5|2B|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>Try this: <a href="http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/" rel="nofollow noreferrer">http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/</a></p>

<p>ََََََََََََََََََََََََََََََََََََََََََََََََ</p>


blocks|key|1366868|text|我使用这种方法对多个块执行此操作，而无需调用新的JavaScript代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1366869|<a+href="#"+data-toggle="thatblock">Show/Hide+Content</a>

<div+id="thatblock"+style="display:+none">
++Here+is+some+description+that+will+appear+when+we+click+on+the+button
</div>|code-block|syntax|javascript|1366870|然后是所有这些情况的JavaScript部分：|1366871|$(function()+{
++$('*[data-toggle]').click(function()+{
++++$('#'%2B$(this).attr('data-toggle')).toggle();
++++return+false;
++});
});|1366872|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I used this way to do that for multiple blocks without conjuring new JavaScript code:</p>

<pre><code>&lt;a href="#" data-toggle="thatblock"&gt;Show/Hide Content&lt;/a&gt;

&lt;div id="thatblock" style="display: none"&gt;
  Here is some description that will appear when we click on the button
&lt;/div&gt;
</code></pre>

<p>Then a JavaScript portion for all such cases:</p>

<pre><code>$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});
</code></pre>


blocks|key|1581995|text|这就是我如何同时切换两个div：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1581996|$('#login-form,+#recover-password').toggle();|code-block|syntax|javascript|1581997|它起作用了!|1581998|entityMap^0|C|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>This is how I toggle two <code>div</code>s at the same time:</p>

<pre><code>$('#login-form, #recover-password').toggle();
</code></pre>

<p>It works!</p>


blocks|key|1366907|text|function+toggling_fields_contact_bank(class_name)+{
++++jQuery("."+%2B+class_name).animate({
++++++++height:+'toggle'
++++});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1366908|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function toggling_fields_contact_bank(class_name) {
    jQuery("." + class_name).animate({
        height: 'toggle'
    });
}
</code></pre>


<p>I wish to accomplish a fairly simple task (I hope!)</p>

<p>I got two div tags and one anchor tags, like this:</p>

<pre><code>&lt;a href="javascript:void(0);"&gt;forgot password?&lt;/a&gt;
&lt;div id="login-form"&gt;&lt;/div&gt;
&lt;div id="recover-password" style="display:none;"&gt;&lt;/div&gt;
</code></pre>

<p>I wish use the anchor tag to toggle between the two div tags, hide the one and show the other and vice versa.</p>

<p>How can this be done the best way?</p>


Switch/toggle div (jQuery)

我希望完成一个相当简单的任务(我希望！)我有两个div标签和一个锚标签，如下所示：<a href="javascript:void(0);">forgot password?</a><div id="login-form"></div><div id="recover-password" style="display:...

问切换/切换div (jQuery)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换/切换div (jQuery)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换/切换div (jQuery)
EN