jquery顯示和隱藏在同一鏈接點擊

我有一個div，我想顯示和隱藏鏈接點擊。沒有兩個不同的鏈接可以顯示和隱藏，但只有一個。我已經使用過開關（），但它不是爲我工作..jquery顯示和隱藏在同一鏈接點擊

下面是代碼

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

感謝

來源

2010-02-10 shanthiram

你能澄清一下你想要展示和隱藏什麼嗎？鏈接本身？你想讓它閃爍，因爲jQuery有你可以使用的眨眼效果。 –

你是如何使用切換的？ –

我只是試圖滑動maindiv。切換（）不適合我......我無法找到問題。有沒有辦法使用相同的鏈接來顯示和隱藏？ – shanthiram

感謝每一個試圖回答這個問題，每一個是正確的..

我找到了解決方案。以下是jquery功能

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

來源

2010-02-10 19:54:16 shanthiram

以下的作品。如果您無法獲得此爲您具體的項目工作，問題是在其他地方，而不是與切換方法或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

來源

2010-02-10 19:26:33 Sampson

我嘗試了兩種方法切換和slideToggle ..他們不隱藏div。 – shanthiram

@shanthiram：他們會的。確保jQuery被引用，並且你沒有誤解任何東西。 – Sampson

@shanthiram：喬納森的代碼應該完美。你不小心給了另一個同一個ID（「maindiv」）？ –

下通常工作。

$('#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>

希望它能幫助。

來源

2010-02-10 19:26:35

這應該工作（與切換）

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

來源

2010-02-10 19:27:01

toggle（）在其他情況下工作正常，但沒有在我的工作.. 感謝tyring。 – shanthiram

你嘗試過：

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

來源

2010-02-10 19:28:25 Reigel

我做了，它沒有幫助.. – shanthiram

我通過根據要切換的div的可見性更改鏈接文本來實現此目的。

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

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

如果切換工作不適合你出於某種原因對divToToggle

來源

2010-02-10 20:04:20 brheal

以上所有的解決方案應該只是用秀（）和隱藏（）。我無法想象它會在CSS中阻止這項工作。

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

來源

2010-02-11 03:25:02 Amy

我認爲這是1-3.2 – shanthiram

，你可以很可能嘗試了這一點

<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

來源

2011-09-09 20:24:25 Hishalv

@ shanthiram這應該工作，也在這一段時間奮鬥 – Hishalv

-1

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>

來源

2016-11-30 10:55:46

HTML代碼將如下所示：

–

jquery顯示和隱藏在同一鏈接點擊

回答

相關問題