blocks|key|830460|text|以下是有效的方法。如果您无法将此方法用于特定的项目，则问题出在其他地方，而不是切换方法或jQuery语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|830461|$(function(){
++$("a#showhidediv").click(function(){
++++$("#maindiv").toggle();
++});
});|code-block|syntax|javascript|830462|根据您的评论，您可能希望使用$.slideToggle()：|830463|$(function(){
++$("a#showhidediv").click(function(){
++++$("#maindiv").slideToggle();
++});++
});|830464|有了两个浮动元素，您可能需要稍微修改一下您的标记：|830465|<div+id="maindiv">
++<div+style="width:49%25;float:left;">Foo</div>
++<div+style="width:49%25;float:left;">Bar</div>
++<div+style="clear:both"></div>
</div>|830466|所有这些都按照这个在线演示中所演示的那样工作：http://jsbin.com/anaxi/edit，并在这个演示中使用slideToggle：http://jsbin.com/anaxi/2/edit|offset|length|830467|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/anaxi/edit|1|http://jsbin.com/anaxi/2/edit^0|0|0|0|0|0|0|N|R|0|20|T|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@$Q|19|R|1A|1|1B]|$Q|1C|R|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>The following works. If you're unable to get this to work for you particular project, the problem is elsewhere, and not with the toggle method or the jQuery syntax:</p>

<pre><code>$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").toggle();
  });
});
</code></pre>

<p>From your comments, it may be the case that you want to use $.slideToggle() instead:</p>

<pre><code>$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").slideToggle();
  });  
});
</code></pre>

<p>With two floated elements, you may want to modify your markup a bit:</p>

<pre><code>&lt;div id="maindiv"&gt;
  &lt;div style="width:49%;float:left;"&gt;Foo&lt;/div&gt;
  &lt;div style="width:49%;float:left;"&gt;Bar&lt;/div&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>All of this works as expected as demonstrated in this online demo: <a href="http://jsbin.com/anaxi/edit" rel="noreferrer">http://jsbin.com/anaxi/edit</a> and using slideToggle in this demo: <a href="http://jsbin.com/anaxi/2/edit" rel="noreferrer">http://jsbin.com/anaxi/2/edit</a></p>


blocks|key|829023|text|下面的方法通常是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|829024|$('#showhidediv').click(function(e)+{
++++$('#maindiv').toggle();
++++e.preventDefault();+//+Stop+navigation
});|code-block|syntax|javascript|829025|它所做的就是在您想要显示/隐藏的div上调用toggle()。如果你有几个这样的链接，并且切换div总是跟在这个链接后面，你可以这样做：|829026|$('.showhide').click(function(e)+{
++++$(this).next().toggle();
++++e.preventDefault();+//+Stop+navigation
});|829027|HTML代码将如下所示：|829028|<a+class="showhide">Foo</a>
<div>show+me+/+hide+me</div>

<a+class="showhide">Bar</a>
<div>show+me+/+hide+me</div>|829029|希望能有所帮助。|829030|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>The following usually works.</p>

<pre><code>$('#showhidediv').click(function(e) {
    $('#maindiv').toggle();
    e.preventDefault(); // Stop navigation
});
</code></pre>

<p>What it does is call toggle() on the div you want to show/hide. If you have several of this links and the toggle div always follows the link you can do something like this:</p>

<pre><code>$('.showhide').click(function(e) {
    $(this).next().toggle();
    e.preventDefault(); // Stop navigation
});
</code></pre>

<p>And the HTML code would look like this:</p>

<pre><code>&lt;a class="showhide"&gt;Foo&lt;/a&gt;
&lt;div&gt;show me / hide me&lt;/div&gt;

&lt;a class="showhide"&gt;Bar&lt;/a&gt;
&lt;div&gt;show me / hide me&lt;/div&gt;
</code></pre>

<p>Hope it helps.</p>


blocks|key|2537074|text|这应该会起作用(使用切换)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2537075|$('#showhidediv').click(+function()+{+$('#maindiv').toggle();return+false;+}+);|code-block|syntax|javascript|2537076|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>This should work (<em>with the toggle</em>)</p>

<pre><code>$('#showhidediv').click( function() { $('#maindiv').toggle();return false; } );
</code></pre>


blocks|key|2537082|text|您是否尝试过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2537083|$('#showhidediv').click(function(){
++$('#maindiv').toggle();
++return+false;+//+should+return+false+to+prevent+page+loading
})|code-block|syntax|javascript|2537084|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>have you tried:</p>

<pre><code>$('#showhidediv').click(function(){
  $('#maindiv').toggle();
  return false; // should return false to prevent page loading
})
</code></pre>


blocks|key|2537113|text|感谢每个人试图回答这个问题，每个人都是对的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2537114|我找到了解决方案。下面是jquery函数|2537115|$("#showhide").click(function()+{+
++if+(+$("#maindiv").is(":visible")+)+{+
++++$("#maindiv").hide();+
++}+else+if+(+$("#maindiv").is(":hidden")+)+{+
++++$("#maindiv").show();+
++}
});|code-block|syntax|javascript|2537116|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Thanks every one for trying to answer the question and every one was right.. </p>

<p>I found the solution . The following is the jquery function</p>

<pre><code>$("#showhide").click(function() { 
  if ( $("#maindiv").is(":visible") ) { 
    $("#maindiv").hide(); 
  } else if ( $("#maindiv").is(":hidden") ) { 
    $("#maindiv").show(); 
  }
});
</code></pre>


blocks|key|2537138|text|我通过根据您想要切换的div的可见性更改链接文本来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2537139|if+($("#divToToggle").is(":visible"))
+++$("#linkId")[0].innerText+=+"show";
else
+++$("#linkId")[0].innerText+=+"hide";

$("#divToToggle").toggle();|code-block|syntax|javascript|2537140|如果由于某种原因切换不起作用，只需在divToToggle上使用show()和hide()|2537141|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I accomplish this by changing the link text based on the visibility of the div you want to toggle.</p>

<pre><code>if ($("#divToToggle").is(":visible"))
   $("#linkId")[0].innerText = "show";
else
   $("#linkId")[0].innerText = "hide";

$("#divToToggle").toggle();
</code></pre>

<p>If toggle is not working for you for some reason just use show() and hide() on divToToggle</p>


blocks|key|82449|text|上面的所有解决方案都应该是有效的。我不能想象在CSS中会有什么东西会阻止它工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|82450|您使用的是什么版本的jQuery？|82451|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>All the solutions above should work.  I can't imagine that it would be something in CSS that would prevent this from working.</p>

<p>What version of jQuery are you using?</p>


blocks|key|2537167|text|你可以试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2537168|<a+href="javascript:toggleDiv('maindiv');">show-hide</a>
+++++<div+id="maindiv">
++++++++++#....content+goes+here.....
+++++<div>

+<script+text="text/javascript">
+++function+toggleDiv(divId)+{
++++++$("#"%2BdivId).toggle();
+++}
+</script>|code-block|syntax|javascript|2537169|对我来说很有用，也可以看看这个link|offset|length|2537170|entityMap|0|LINK|mutability|MUTABLE|url|http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/^0|0|0|F|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>you could probable try this out</p>

<pre><code>&lt;a href="javascript:toggleDiv('maindiv');"&gt;show-hide&lt;/a&gt;
     &lt;div id="maindiv"&gt;
          #....content goes here.....
     &lt;div&gt;

 &lt;script text="text/javascript"&gt;
   function toggleDiv(divId) {
      $("#"+divId).toggle();
   }
 &lt;/script&gt;
</code></pre>

<p>works for me, also checkout this <a href="http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/" rel="nofollow" >link</a></p>


blocks|key|2537174|text|Javascript代码:|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2537175|$(".user-profile-info").unbind().click(function(){

++++if($(+".user-profile-info"+).hasClass("collapsed")){

+++++++++$('#user-profile-submenu').css('display',+'block');
+++++++++$(+".user-profile-info"+).removeClass("collapsed");
++++}

++++else
++++{+++++++
+++++++++$(+".user-profile-info"+).addClass("collapsed");
+++++++++$('#user-profile-submenu').css('display',+'none');
++++}
});|code-block|syntax|javascript|2537176|超文本标记语言代码:|2537177|<div+class="user-profile-info+collapsed"></div>
<div+id="user-profile-submenu">Content+of+click</div>|2537178|entityMap^0|0|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p><strong>Javascript code :</strong>   </p>

<pre><code>$(".user-profile-info").unbind().click(function(){

    if($( ".user-profile-info" ).hasClass("collapsed")){

         $('#user-profile-submenu').css('display', 'block');
         $( ".user-profile-info" ).removeClass("collapsed");
    }

    else
    {       
         $( ".user-profile-info" ).addClass("collapsed");
         $('#user-profile-submenu').css('display', 'none');
    }
});
</code></pre>

<p><strong>HTML code :</strong></p>

<pre><code>&lt;div class="user-profile-info collapsed"&gt;&lt;/div&gt;
&lt;div id="user-profile-submenu"&gt;Content of click&lt;/div&gt;
</code></pre>


<p>I have a div and I want to show and hide on a link click. Not two different links to show and hide but only one.
I have used toggle() but its not working for me..</p>

<p>Here is the code</p>

<pre><code>&lt;a id="showhidediv"&gt;show-hide&lt;/a&gt;
&lt;div id="maindiv"&gt;
 &lt;div id="innerleftdiv" style="width:49%;float:left"&gt;
 &lt;/div&gt;
 &lt;div id="innerrightdiv" style="width:49%;float:left"&gt;
 &lt;/div&gt;
&lt;div&gt;

&lt;script text="text/javascript"&gt;
  $().ready(function){
    $("showhidediv").click(function(){
      $("maindiv").hide()
    });
&lt;/script&gt;
</code></pre>

<p>Thanks</p>


jquery show and hide on same link click

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个div，我想在点击链接时显示和隐藏。不是要显示和隐藏两个不同的链接，而是只有一个。我已经用过切换()，但它对我不起作用..以下是代码<a id="showhidediv">show-hide</a><div id="maindiv"> <div id="innerleftdiv" style="width:49...

问jquery在同一链接上显示和隐藏单击
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery在同一链接上显示和隐藏单击EN