更改打開/關閉文本onclick

Question

在堆棧上找到一個小提琴，並隨它玩一下，以適應我們的需求。

但是..我需要「選項卡」多數民衆贊成在容器div下面，基於什麼狀態來改變文本。即。如果開放文本應該說關閉，反之亦然，其他元素隱藏。

我猜測我們應該可以添加如果其他條件js。只是有點卡住了。

小提琴這裏：http://jsfiddle.net/ozzy/zEcXp/

代碼：JS

$(document).ready(function(){ 
$("div#panel").show(); 

var autoTimer = null; 

autoTimer = setTimeout(function(){ 
    $("div#panel").slideDown("slow"); 
    autoTimer = setTimeout(function(){ 
     $("div#panel").slideUp("slow"); 
    }, 5000); 
},2000); 

$("#open").click(function(){ 
    $("div#panel").slideDown("slow"); 
    if(autoTimer) clearTimeout(autoTimer); 
    autoTimer = null; 
}); 

$("#close").click(function(){ 
    $("div#panel").slideUp("slow"); 
    if(autoTimer) clearTimeout(autoTimer); 
    autoTimer = null; 
});   

}）; 代碼：HTML

<div id="widget"> 
<div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div> 
    <div id="open">Open</div> 
    <div id="close">Close</div> 
</div> 

代碼：CSS

#widget {position:relative;width:500px;height:100%;} 
#panel{height:100px;background:#fafafa;border:1px solid #cccccc;z-index:1;} 
#open {cursor:pointer;position:absolute;left:50%; 
padding:0px 8px; 
border-left:1px solid #cccccc; 
border-right:1px solid #cccccc; 
border-bottom:1px solid #cccccc; 
border-top:1px solid #ffffff; 
z-index:2;} 
#open:hover ,#close:hover {color:#3399ff;} 
#close {cursor:pointer;position:absolute;left:50%;bottom:0px;} 

的代碼是非常粗略的，我知道我們可以通過快捷鍵的CSS等，但都做到了這種方式，所以你可以看到這個問題。 回顧一下，我對TAB位置很滿意，只需要根據面板狀態顯示打開或關閉狀態。因此，只有在面板關閉時才顯示打開標籤並使其可點擊，反之亦然。

乾杯。

.ps只是想知道如果切換會更好。但anyhoo ..讓我們先解決這個問題

Answer 1

我真的不明白你的計時器的東西是什麼，但這裏是一個簡單的方法來滑動打開/關閉面板和更改消息文本。我將綁定到單個元素的單擊事件，toggle_panel，然後使用jQuery的slideToggle處理隱藏/顯示div。最後，我只是簡單地檢查一下slide_toggle中的文本。如果它顯示'已關閉'，則將其更改爲Open。否則它必須是Closed.這被稱爲三元運算符。如果你想更聰明，你可能會想要檢查顯示狀態來確定文本或使用jQuery的data方法存儲狀態。我認爲這對你的用例來說是最直接的。

http://jsfiddle.net/X9Vn4/79/

$("div#panel").show(); 

$("#toggle_panel").click(function() { 
    $('#panel').slideToggle(); 
    $(this).html($(this).html() == 'Closed' ? 'Open' : 'Closed');      
}); 

另一種解決方案基於這樣的事實，檢查div可見比檢查HTML內容更安全

$("#toggle_panel").click(function(){ 
    if ($("div#panel").is(':visible')) { 
     $(this).html('Close');   
    } 
    else { 
     $(this).html('Open');      
    } 
    $("div#panel").slideToggle("slow"); 
    if(autoTimer) clearTimeout(autoTimer); 
    autoTimer = null; 
}); 

Answer 2

的HTML必須是（當然CSS應該被移到到樣式表）：

<div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div> 
<div id="open" style="display:none;">Open</div> 
<div id="close">Close</div> 

javascript應該是：

$(document).ready(function(){ 
    $("div#panel").show(); 

    var autoTimer = null; 

    autoTimer = setTimeout(function(){ 
     $("div#panel").slideDown("slow"); 
     autoTimer = setTimeout(function(){ 
      $("div#panel").slideUp("slow"); 
     }, 5000); 
    },2000); 

    $("#open").click(function(){ 
     $("div#panel").slideDown("slow"); 
     $("div#open").hide(); 
     $("div#close").show(); 
     if(autoTimer) clearTimeout(autoTimer); 
     autoTimer = null; 
    }); 

    $("#close").click(function(){ 
     $("div#panel").slideUp("slow"); 
     $("div#open").show(); 
     $("div#close").hide(); 
     if(autoTimer) clearTimeout(autoTimer); 
     autoTimer = null; 
    });   
}); 

下面是它的工作小提琴：
http://jsfiddle.net/K37uz/

Answer 3

你可以在你的代碼中使用此。你可以從這裏提高

HTML代碼

<div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div> 
<div id="openClose">Close</div> 

JS

$(document).ready(function(){ 
    $("div#panel").show(); 

    var autoTimer = null; 

    autoTimer = setTimeout(function(){ 
     $("div#panel").slideDown("slow"); 
     autoTimer = setTimeout(function(){ 
      $("div#panel").slideUp("slow"); 
     }, 5000); 
    },2000); 

    $("#openClose").click(function(){ 
     $("div#panel").toggle("slow"); 
     if($("#openClose").text()=="Close"){ 
      $("#openClose").text("Open"); 
     } 
     else 
      $("#openClose").text("Close"); 
     if(autoTimer) clearTimeout(autoTimer); 
     autoTimer = null; 
    });   
});