Показать Скрыть DIV с Jquery

Question

У меня есть простая функция JQuery Show / Hide, которая явно показывает и скрывает div.Есть три вещи, которые я не могу сделать самостоятельно.

<script type="text/javascript">
  $(document).ready(function() {
  $('#showHideBox').show();

  $('#showHidetoggle').click(function() {
  $("#showHidetoggle").text("Show me")

    $('#showHideBox').slideToggle(250);
    return false;
  });
});
</script>

<a href="#" id="showHidetoggle">Hide Me</a>

1. Я ищу способ изменить текст в теге привязки, чтобы сказать «показать / скрыть».Я знаю, что об этом уже спрашивали много раз.Но мне кажется, что я не могу найти конкретные примеры для моего сценария, пока текст изменяется по щелчку, но не по последующим щелчкам.

2. Скрипт скрывает элемент div, однако, скрывая его из поля зренияМне нужна часть на div, видимая таким образом. Я могу прикрепить тег кнопки (привязки), по которому щелкнет пользователь.

3. Наконец, когда пользователь нажимает кнопку скрыть, div выскальзываетвид только для повторного появления, когда пользователь обновляет страницу.Как сделать так, чтобы div оставался скрытым, но появлялся только тогда, когда пользователь нажимал кнопку?

Пример того, чего я пытаюсь достичь, можно найти на этой странице на constantcontact.com .Посмотрите на нижний колонтитул, вы увидите, что он выдвигается из поля зрения, но кнопка все еще видна.

Любая помощь будет принята с благодарностью.

Спасибо всем.

Answer 1

Итак, для этого проще всего (imo) создать контейнер для вашей кнопки + блока (который вы хотите скрыть). Ваша кнопка останется на месте, всегда. Когда страница загружается, мы прикрепляем к вашей кнопке событие, которое будет показывать и скрывать ваш ящик в зависимости от текущего состояния блока (если он скрыт, показать его и, если он видим, скрыть).

Достаточно просто.

Теперь вы также хотите сохранить это видимое / скрытое состояние между загрузками страниц / посещениями страниц. Для этого вам понадобится файл cookie в браузере пользователя (примечание: если ваш пользователь вошел в систему или что-то в этом роде, вы можете сделать это другим способом - но файл cookie - это самый легкий способ сделать это и не Для сохранения данных в вашей базе данных требуется двусторонняя передача на сервер).

Чтобы сделать это, я предлагаю пойти и получить плагин jQuery Cookie , который очень прост в использовании (как вы увидите ниже) и избавляет от головной боли при работе с cookie. Каждый раз, когда ваш пользователь нажимает на вашу кнопку и вы меняете состояние окна, вы собираетесь записать cookie в браузер пользователя и сохранить текущее состояние окна. Таким образом, когда пользователь перезагружает страницу, вы узнаете, каково текущее состояние (из-за файла cookie). В приведенном ниже примере я установил срок действия файла cookie через год, но вы можете изменить его, если хотите.

<div id="ShowHideContainer">
    <p><a id="ShowHideButton">Click Here To Hide!</a></p>
    <div id="ShowHideBox">text that gets shown and hidden, woo</div>
</div>

<script>
$(document).ready(function()
{
    var $ShowHideBox = $('#ShowHideBox').hide(),
        $ShowHideButton = $('#ShowHideButton');

    /* Initialize the box based on the state of the cookie in the user's browser*/
    initBox();

    $('#ShowHideButton').click(function() {

        if (boxVisible())
        {
            //the box is visible. lets hide it.
            hideBox();
        }
        else
        {
            //the box is invisible. show it.
            showBox();
        }
    });

    function initBox()
    {
        //if the cookie says this is visible, and it's not...show it
        if ( $.cookie('BoxVisible') && ! boxVisible() )
        {
            showBox();
        }
        //if the cookie says this is not visible, and it is...hide it
        else if ( ! $.cookie('BoxVisible') && boxVisible() )
        {
            hideBox();
        }
    }  

    //check to see if the box is visible or not, currently
    function boxVisible()
    {
        return $ShowHideBox.hasClass('hidden')? false : true;
    }

    //show the box, change the button text, and set the cookie
    function showBox()
    {
        $ShowHideBox.slideUp(250).removeClass('hidden');
        $ShowHideButton.html("Click Here to Hide!");
        $.cookie('BoxVisible', 1, {expires: 365});
    }

    //hide the box, change the button text, and set the cookie
    function hideBox()
    {
        $ShowHideBox.slideDown(250).addClass('hidden');
        $ShowHideButton.html("Click Here to Show!");
        $.cookie('BoxVisible', 0, {expires: 365});
    }
});
</script>

Answer 2

1. Я изменил код из следующего учебного пособия по эффекту скольжения, чтобы заменить скрыть и показать тег привязки в событии нажатия JQuery.

   Рабочий пример кода ниже можно увидеть в этом JSFiddle :

   $(document).ready(function () {
   
       $("#hide").click(function () {
           $(".target").hide("slide", {
               direction: "up"
           }, 500);
           $('#show').show();
           $('#hide').hide();
       });
   
       $("#show").click(function () {
           $(".target").show("slide", {
            direction: "up"
           }, 500);
           $('#show').hide();
           $('#hide').show();
       });
   
   
       if ($('.target').is(':visible')) {
   
       }
   
   });
   

Answer 3

$('#showHidetoggle').click(function() {  
    var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
    $("#showHidetoggle").text(boxText);
    $('#showHideBox').slideToggle(250);
    return false;
});

Чтобы сохранить состояние, вам нужно либо использовать код на стороне сервера, либо использовать куки.

Answer 4

Как скрыть и показать тег, используя Jquery & java script

$ (документ) .ready (function () { $ ("# purchase_order"). click (function () { $ ( "Салеп") скрыть (). $ ( "Saleo.") Шоу (). $ ( "# Purchase_order") скрыть (). $ ( "# Sale_order") шоу (). });

Answer 5

1. Вы можете использовать if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/}, чтобы изменить текст для отображения / скрытия при необходимости.
2. Вы захотите поместить кнопку показать / скрыть за пределы поля, которое вы скрываете.
3. Вы можете использовать файлы cookie или сеансы или Локальное хранилище для хранения информации, которая должна сохраняться при загрузке страниц. Вам нужно будет установить начальное состояние окна, чтобы оно показывалось / скрывалось при загрузке страницы.

Answer 6

$(document).ready(function() {
    $('#showHideBox').show();

    $('#showHidetoggle:not(.hideme)').click(function() {
        $(this).html("Hide me").addClass("hideme");
        $('#showHideBox').animate({height: '100px'}, 250); // Or whatever height you want
        return false;
    });

    $('#showHidetoggle.hideme').click(function() {
        $(this).html("Show me").removeClass("hideme");
        $('#showHideBox').animate({height: '300px'}, 250); // Or whatever height it was orginally.
        return false;
    });

});

Должен сделать свое дело.