Изменить открыть / закрыть текст по клику

Question

Нашел скрипку в стеке и сыграл с ней немного, чтобы удовлетворить наши потребности.

Но .. Мне нужно, чтобы "tab" находился под контейнером div, чтобы изменить текст в зависимости от состояния. то есть. если открытый текст должен сказать «закрыть» и наоборот, а другой элемент скрыт.

Я предполагаю, что мы сможем добавить условие if к 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, просто нужно показать Open или Closed в зависимости от состояния Panel. Так что показывайте только открытую вкладку и делайте ее активной, если панель закрыта, и наоборот.

Приветствие.

.ps просто интересно, будет ли переключение работать лучше. Но в любом случае .. давайте сначала исправим это

Answer 1

Я не совсем понял, о чем был весь ваш таймер, но вот простой способ сдвинуть / открыть панель и изменить текст сообщения.Я связываюсь с событием click одного элемента, 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;
    });        
});