Скрыть / показать переключатель - PullRequest
Новая
       12

Скрыть / показать переключатель

0 голосов
/ 23 марта 2012

У меня есть следующая разметка с помощью базового и расширенного дивизионов поиска. 

<div class="form">
     <form>
         <input type="text" name="first_name">
         <input type="text" name="last_name">

       <div id="Basic" class="slide">
         <input type="text" name="location"> 
       </div>

       <a onclick="ShowDiv('Adv');">+ show advanced fields</a>

      <div id="Adv" class="slide hidden">
         <input type="text" name="first_name2">
         <input type="text" name="last_name2">
         <input type="text" name="street">
         <input type="text" name="town">
         <input type="text" name="country">
       </div>
     </form>

     <a onclick="ShowDiv('Basic');">- hide advanced fields</a> 
    </div>

Переключение достигается с помощью следующего скрипта 

 function HideDiv() {
         $('.slide').hide();
     }
     function ShowDiv(ctrl) {
         HideDiv();
         $('#' + ctrl).show();
     }
     ShowDiv('Basic');

У меня также есть следующий JQuery вместо, в котором показывается div div, если пользователь возвращается на страницу со страницы результатов, предполагая, что он изначально заполнил все поля ввода из формы поиска 

//show adv div based on input value data 
$(function(){
    if($("#Adv input[value!='']").length)
        $('#Adv').show(); // if this is the element you want to show.
 });

Мне нужно устранить необходимость использования обеих ссылок.Мне нужно иметь только одну ссылку в зависимости от состояния.Таким образом, если div basic отображается как значение по умолчанию, ссылка скажет show advanced.Когда отображается расширенный, якорная ссылка должна переключиться, чтобы скрыть расширенный

Как мне нужно отредактировать мой jQuery и разметить.

Ответы [ 6 ]

1 голос
/ 23 марта 2012 
$(function(){
    $(".toggler").click(function(e) {
        e.preventDefault();
        $(this).find("span").toggle();
        $(".togglee").slideToggle();
    });

    //show adv div based on input value data 
    if($("#Adv input[value!='']").length) {
        $('.toggler').click(); // if this is the element you want to show.
    }

});

И HTML: 

<html>
    <body>
        <div class="form">
            <form>
                <input type="text" name="first_name">
                <input type="text" name="last_name">

                <div class="Basic togglee" class="slide">
                    <input type="text" name="location">
                </div>

                <div id="Adv" class="slide hidden togglee">
                    <input type="text" name="first_name2">
                    <input type="text" name="last_name2">
                    <input type="text" name="street">
                    <input type="text" name="town">
                    <input type="text" name="country">
                </div>
            </form>

            <a class="toggle-link toggler">
                <span>+ show advanced fields</span>
                <span class="hidden">- hide advanced fields</span>
            </a>

        </div>
    </body>
</html>

jsFiddle пример здесь .

0 голосов
/ 23 марта 2012

в дополнение к другому ответу, может быть, если вам нужна анимация, вам стоит взглянуть на это http://jqueryui.com/demos/toggle/#option-options

0 голосов
/ 23 марта 2012

Найдите ниже. 

<div class="form">
     <form>
         <input type="text" name="first_name">
         <input type="text" name="last_name">

       <div class="Basic" class="slide">
         <input type="text" name="location"> 
       </div>

       <a class="toggle-link" onclick="ShowHideDiv();" id='bttn'>+ show advanced fields</a>

      <div id="Adv" class="slide hidden">
         <input type="text" name="first_name2">
         <input type="text" name="last_name2">
         <input type="text" name="street">
         <input type="text" name="town">
         <input type="text" name="country">
       </div>
     </form>


    </div>

Я также изменил часть JavaScript.

  function Hide() {
             $('.slide').hide();
         }

    function Show() {

      $('.slide').show();
    }
         function ShowHideDiv() {

           var str = $("#bttn").text();
           if(str === '+ show advanced fields'){

             $("#bttn").text('- hide advanced fields');
             Show();

           }
           else {
              $("#bttn").text('+ show advanced fields');
             Hide();

           }

         }
0 голосов
/ 23 марта 2012

Вы можете сделать

js 

$("a.toggle").click(function() {
    $(this).closest('div.form').find("#Adv").toggle();
    $(this).toggleClass("hide");
    if ($(this).hasClass("hide")) {
        $(this).text("hide advanced fields");
    } else {
        $(this).text("show advanced fields");
    }


});

html 

<div class="form">
 <form>
     <input type="text" name="first_name">
     <input type="text" name="last_name">

   <div class="Basic" class="slide">
     <input type="text" name="location">
   </div>

  <div id="Adv" class="slide hidden">
     <input type="text" name="first_name2">
     <input type="text" name="last_name2">
     <input type="text" name="street">
     <input type="text" name="town">
     <input type="text" name="country" value="gh">
   </div>
 </form>

 <a class='toggle'>show advanced fields</a>
</div>

скрипку здесь http://jsfiddle.net/c27dW/

0 голосов
/ 23 марта 2012

Эта функция может быть лучше, но это один из способов сделать это.

Сделать ссылку <a href="#" class="show adv">Click</a>.

Функция jQuery переключает класс, таким образом, функциональность. 

$('a.show').click(function(e) {
    e.preventDefault();
    if($(this).hasClass('basic'))
    {
        ('#adv').hide();
        ('#basic').show();
        $(this).addClass('adv');
        $(this).removeClass('basic');
    }
    else if($(this).hasClass('adv'))
    {
        ('#basic').hide();
        ('#adv').show();
        $(this).addClass('basic');
        $(this).removeClass('adv');
    }           
});

Но лучше подходит для этого jQuery UI, особенно когда у вас есть больше контейнеров, которые вы хотите показать / скрыть.

0 голосов
/ 23 марта 2012

HTML 

<a class="toggle-link" href="#Adv" >toggle advanced fields</a>

JS 

$('.toggle-link').on('click.toggle', function(evt) {
   var tgt = $($(this).attr('href'));  /* tgt = $("#Adv") */
   evt.preventDefault();

   if (tgt.length) { /* if $("#Adv") exists */
      $(this).toggleClass(".expanded"); /* add or remove this class for the link */
      tgt.toggleClass(".hidden"); /* add or remove this class in the target element */
   }
});

1007 * CSS * 

.toggle-link:before { content: "+"; padding-right: 1em; }
.toggle-link.expanded:before { content: "-"; }

в этом примере информация об элементе, который нужно скрыть / показать, передается вместе с атрибутом href, а обработчик события не является встроенным, поэтому вы можете избежать многократного вызова одной и той же функции, смешивая JavaScript и разметку вместе.

См. Пример скрипта: http://jsfiddle.net/SnKHg/

...