每次顯示一格div

當我點擊菜單上的一個鏈接時，一個div滑落顯示一些內容。但問題是，我一次只需要一個div。每次顯示一格div

正如你可以在小提琴上看到的，如果你點擊一個鏈接，出現一個div，如果你點擊另一個鏈接，另一個div出現在第一個div下面。

我一次只想要一個DIV。我應該修改我的JavaScript代碼來做到這一點？

PS：我希望我的div隱藏，如果我再次點擊同一鏈接：

點擊「首頁」 - >顯示DIV 點擊「首頁」 - >關閉DIV

$(document).ready(function(){ 

    $("#flip").click(function(){ 
    $("#panel").slideToggle("fast"); 
    }); 
    $("#flip2").click(function(){ 
    $("#panel2").slideToggle("fast"); 
    }); 
    $("#flip3").click(function(){ 
    $("#panel3").slideToggle("fast"); 
    }); 
    $("#flip4").click(function(){ 
    $("#panel4").slideToggle("fast"); 
    }); 
});

http://jsfiddle.net/U52rr/8/

感謝您的回答，我非常感謝您的幫助！

來源

2013-08-20 0x17

好哥們，首先，你不能有相同的ID超過1元，所以這應該是第一件事，你清楚，所有第二，你可以清理你的標記了一下，有一些更易於管理，例如：

<nav> 
    <ul> 
     <li><a class="flip" href="#panel1">Home</a></li> 
     <li><a class="flip" href="#panel2">Agenda</a></li> 
     <li><a class="flip" href="#panel3">Media</a></li> 
     <li><a class="flip" href="#panel4">Contact</a></li> 
    </ul> 
</nav> 
... 
<div class="panel" id="panel1"> 
    <div>Anatomy</div> 
</div> 
<div class="panel" id="panel2"> 
    <div>Anatomy is</div> 
</div> 
<div class="panel" id="panel3"> 
    <div>Anatomy is destiny.</div> 
</div> 
<div class="panel" id="panel4"> 
    <div>Anatomy is destiny555.</div> 
</div>

現在，您可以針對所有由簡單的類的鏈接和麪板（應該清理你的CSS以及）。

然後是JavaScript的：

$(".flip").on("click", function(e) {   
    var target = $(this).attr("href"); 
    $(target).slideToggle("fast"); 
    $(".panel").not(target).hide(); 

    e.preventDefault(); 
});

這裏是小提琴：http://jsfiddle.net/U52rr/43/

來源

2013-08-20 18:24:19

+1我打算髮表基本相同的答案，唯一的問題在做'$（「。panel」）時，你不應該隱藏目標。hide（）;'否則它不會正確切換 –

@koala_dev，感謝+1 :)不完全確定你對切換？檢查小提琴，它似乎在工作，或者我錯過了什麼？ –

點擊一個環節，內容打開，然後再次單擊，內容應關閉 –

-2

執行.slideToggle（）時，您可以同時執行其他的.hide（）。

$("#flip").click(function(){ 
$("#panel").slideToggle("fast"); 
$("#panel2").hide("fast"); 
$("#panel3").hide("fast"); 
$("#panel4").hide("fast");

這FIDDLE應該有所幫助：http://jsfiddle.net/U52rr/12/

來源

2013-08-20 18:12:25

$(document).ready(function() { 

    $("#flip").click(function() { 
     $('.current').removeClass('.current').hide(); 
     $("#panel").addClass("current").slideDown("fast"); 
    }); 
    $("#flip2").click(function() { 
     $('.current').removeClass('.current').hide(); 
     $("#panel2").addClass("current").slideDown("fast"); 
    }); 
    $("#flip3").click(function() { 
     $('.current').removeClass('.current').hide(); 
     $("#panel3").addClass("current").slideDown("fast"); 
    }); 
    $("#flip4").click(function() { 
     $('.current').removeClass('.current').hide(); 
     $("#panel4").addClass("current").slideDown("fast"); 
    }); 
});

你需要隱藏（或向上滑動-depending你想要的樣子）當前顯示的股利。我向顯示的div添加了一類電流以跟蹤它。 http://jsfiddle.net/U52rr/8/

來源

2013-08-20 18:12:42

我將一個類添加到您的div和鏈接，並點擊事件添加到您的鏈接，如：

$(document).ready(function(){ 
    $('.linkClass').click(function(){ 
     $('.divClass').not($(this).parent('.divClass')).hide(); 
     $(this).parent('.divClass').slideToggle("fast"); 
    }); 
}

這將隱藏所有其他div的除了一個與連結件點擊。

來源

2013-08-20 18:13:05

的點擊的元素不是DIV所以你slidetoggling錨，雖然方法比較適合 – Huangism

DEMO

添加一個類的所有div的，而不是ID，以更快。

$("#flip").click(function(){ 
    $(".panelClass").hide(); 
    $("#panel").slideDown("fast"); 
});

來源

2013-08-20 18:13:33 Incognito

你可以使用相同的HTML和有使用這種方法的一些更簡單：

主要是我穿越UL裏面所有的鏈接，並且可以只使用一個功能綁定的點擊。

使得面板連接可見之前，必須隱藏所有可見

$(document).ready(function(){ 
    $("nav ul a").click(function(){ 
    $('#layer > div:visible').hide(); 
    $('#' + (this.id).replace('flip','panel')).slideToggle("fast"); 
    }); 
});

http://jsfiddle.net/U52rr/29/

來源

2013-08-20 18:15:08

添加類的所有div的，其他..

$("#flip3").click(function(){ 
$(".close").hide(); 
$("#panel3").slideToggle("fast");

DEMO JSFIDDLE

來源

2013-08-20 18:17:16

謝謝！但是，如果我再次點擊相同的鏈接，我希望我的div隱藏起來。點擊「HOME」 - >顯示div 點擊「HOME」 - >關閉div – 0x17

@MarkPazovic你應該更新問題以包含這個所需的行爲 – Huangism

試試這個：

var $panels = $(".panel").hide(); 
$(".link").click(function(e){  
    e.preventDefault();  
    var $panel = $panels.eq($(this).data("index")); 
    $panels.not($panel).slideUp();  
    if($panel.is(":visible")){ 
     $panel.slideUp(); 
     return; 
    }   
    $panel.slideDown(); 
});

工作小提琴這裏：http://jsfiddle.net/U52rr/33/

我希望它能幫助。

來源

2013-08-20 18:31:36 maverickosama92

每次顯示一格div

回答

相關問題