Question

在堆叠上找到了一个小提琴，并且玩得很适合我们的需要。

但是..我需要在容器div下面的“tab”，根据什么状态更改文本。即。如果打开文本应该说关闭，反之亦然，其他元素隐藏。

我猜我们应该能够将if else条件添加到js中。只是有点卡住了。

代码：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位置感到满意，只需要根据Panel状态显示Open或Closed。因此，只有在面板关闭时才显示“打开”选项卡并使其可单击，反之亦然。

干杯。

.ps只是想知道切换是否会更好。但是anyhoo ..让我们先解决这个问题

Answer 1

我真的不明白你的整个计时器的内容是什么，但这里有一个简单的方法来滑动打开/关闭面板并更改消息文本。我绑定到单个元素{1}的click事件，然后使用jQuery的slideToggle处理隐藏/显示div。最后，我只是对slide_toggle中的文本进行简单的检查。如果它显示为“已关闭”，则我将其更改为toggle_panel。否则它必须是Open这称为三元运算符。如果你想变得更聪明，你可能想要检查显示状态以确定文本或使用jQuery的data方法存储状态。我认为这对你的用例来说是最直接的。

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

Closed.

基于检查div可见性这一事实的另一种解决方案比检查html的内容

更安全

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

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

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

更改打开/关闭文本onclick

3 个答案: