Question

我有一个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>

由于

Answer 1

以下作品。如果你无法让这个为你的特定项目工作，问题出在其他地方，而不是使用toggle方法或jQuery语法：

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

根据您的评论，您可能希望使用$ .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

Answer 2

这应该有效（ with toggle ）

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

Answer 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>

希望它有所帮助。

Answer 4

感谢每一个人试图回答这个问题而且每个人都是对的..

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

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

Answer 5

我通过根据您要切换的div的可见性更改链接文本来实现此目的。

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

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

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

Answer 6

你试过了吗？

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

Answer 7

上述所有解决方案都应该有效。我无法想象它会在CSS中阻止它的运行。

您使用的是哪个版本的jQuery？

Answer 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

Answer 9

Javascript代码：

WebView

HTML 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');
    }
});

jquery显示并隐藏在同一链接上单击

9 个答案: