jquery在同一个链接上显示和隐藏点击答案

【问题标题】：jquery show and hide on same link clickjquery在同一个链接上显示和隐藏点击
【发布时间】：2010-02-10 19:22:35
【问题描述】：

我有一个 div，我想在点击链接时显示和隐藏。不是显示和隐藏两个不同的链接，而是只有一个。我使用了 toggle() 但它对我不起作用..

这里是代码

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

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

谢谢

【问题讨论】：

您能否明确说明您想要显示和隐藏的内容？链接本身？你想让它闪烁吗，因为 jQuery 有你可以使用的闪烁效果。
我只是想滑动 maindiv。 toggle() 对我不起作用……而且我找不到问题所在。有没有办法使用相同的链接来显示和隐藏？？
@shanthiram：请查看我的工作演示解决方案。
hide() 函数运行良好，但 toggle() 不行。有没有办法解决这个问题？谢谢..
尝试将“display:block”添加到您的样式中（在样式属性中，而不是通过 css 文件）。切换功能有时需要 AFAIR 才能工作。

标签： jquery jquery-plugins

【解决方案1】：

以下作品。如果您无法让它为您的特定项目工作，问题出在其他地方，而不是切换方法或 jQuery 语法：

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").toggle();
  });
});

在您的 cmets 中，您可能希望使用 $.slideToggle() 代替：

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").slideToggle();
  });  
});

对于两个浮动元素，您可能需要稍微修改一下标记：

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

所有这些都按预期工作，如此在线演示中所示：http://jsbin.com/anaxi/edit 并在此演示中使用 slideToggle：http://jsbin.com/anaxi/2/edit

【讨论】：

我尝试了toggle和slideToggle这两种方法。它们不隐藏div。
@shanthiram：确实如此。确保引用了 jQuery，并且没有拼错任何内容。
@shanthiram：Jonathan 的代码应该可以完美运行。您是否不小心给了另一个 div 相同的 id（“maindiv”）？

【解决方案2】：

这应该可以工作（使用切换）

$('#showhidediv').click( function() { $('#maindiv').toggle();return false; } );

【讨论】：

toggle() 在其他情况下可以正常工作，但在我的情况下无法正常工作。感谢您的努力。

【解决方案3】：

以下通常有效。

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

它的作用是在要显示/隐藏的 div 上调用 toggle()。如果您有多个此类链接，并且切换 div 始终跟随链接，您可以执行以下操作：

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

HTML 代码如下所示：

<a class="showhide">Foo</a>
<div>show me / hide me</div>

<a class="showhide">Bar</a>
<div>show me / hide me</div>

希望对你有帮助。

【讨论】：

【解决方案4】：

我通过根据您要切换的 div 的可见性更改链接文本来完成此操作。

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

$("#divToToggle").toggle();

如果由于某种原因切换不适合您，只需在 divToToggle 上使用 show() 和 hide()

【讨论】：

【解决方案5】：

感谢每一位尝试回答问题的人，每个人都是对的..

我找到了解决方案。下面是jquery函数

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

【讨论】：

【解决方案6】：

你试过了吗：

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

【讨论】：

【解决方案7】：

以上所有解决方案都应该有效。我无法想象 CSS 中的某些东西会阻止它工作。

你使用的是什么版本的 jQuery？

【讨论】：

【解决方案8】：

你可以试试这个

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

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

为我工作，也可以查看link

【讨论】：

@shanthiram 这应该可以工作，也为此苦苦挣扎了一段时间

【解决方案9】：

Javascript 代码：

$(".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');
    }
});

HTML 代码：

<div class="user-profile-info collapsed"></div>
<div id="user-profile-submenu">Content of click</div>

【讨论】：

HTML 代码如下所示：