Ukryj/pokaż zaawansowaną opcję przy użyciu JavaScript

Tworzę formularz HTML i chciałbym, aby niektóre pola były pod "Opcjami zaawansowanymi". Chcę utworzyć link "Opcje zaawansowane", być może ze znakiem "plus", aby po kliknięciu łącza lub znaku pojawiły się te zaawansowane pola. Jak mogę to zrobić w JavaScript? Próbowałem wyszukać w Google coś takiego jak "Ukryj/pokaż opcję zaawansowaną", ale nie mogę znaleźć rozwiązania.Ukryj/pokaż zaawansowaną opcję przy użyciu JavaScript

<form ... /> 
    <label> 
     Title 
     <input id="title" name="title" size="40" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="year" name="year" size="20" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="comment" name="comment" size="40" type="text" value="" /> 
    </label> 
</form>

Na przykład tutaj chcę, aby pole "komentarz" było zaawansowane.

Źródło

2013-05-27 Mika H.

Czy próbowałeś jeszcze coś? –

@ ExploxPills Tak, próbowałem szukać rozwiązania. Nie jestem pewien, co by to zrobiła funkcja JavaScript. Czy mógłbyś podać podpowiedź? –

użyj nazwy klasy CSS (lub atrybutu stylu), aby ukryć opcje zaawansowane. Użyj funkcji JavaScript, aby usunąć klasę (lub atrybut stylu) po kliknięciu linku "pokaż opcje zaawansowane". –

<a href='#' class='advanced'>Advanced Options</a> 

<div id='advancedOptions'><!-- Form stuff here --></div> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#advancedOptions').hide(); 
     $('.advanced').click(function() { 
      if ($('#advancedOptions').is(':hidden')) { 
       $('#advancedOptions').slideDown(); 
      } else { 
       $('#advancedOptions').slideUp(); 
      } 
     }); 
    }); 
</script>

To ukryje element advancedOptions na obciążenia, po kliknięciu znacznika będzie sprawdzić czy advancedOptions jest ukryty, jeśli jest to będzie to pokazać, jeśli nie jest ukryta będzie go ukryć. Będziesz potrzebować;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

w górnej części strony, którego używasz, wiem, że to JQuery, ale dobrze byłoby, aby dowiedzieć się JQuery na przyszłość

Źródło

2013-05-27 19:21:51 user2406160

To zadziałało, ale strona przeładowywała się za każdym razem i moja forma straciłaby swój wkład. Aby to naprawić: musiałem zastąpić '$ ('. Advanced'). Click (function() {' with '$ ('. Advanced') .Kliknij (function (e) {', a następnie następny wiersz dodaj 'e .preventDefault(); ' – Daniel

szukasz czegoś takiego (czysty JS) :

function more(obj) { 
    var content = document.getElementById("showMore"); 

    if (content.style.display == "none") { 
     content.style.display = ""; 
     obj.innerHTML = "-"; 
    } else { 
     content.style.display = "none"; 
     obj.innerHTML = "+"; 
    } 
}

Ta funkcja sprawdza widoczność treści, jeśli jest ukryta, pokazuje ją i na odwrót. Zmienia także znak plus na minus. Oto poprawiony HTML:

<a href="#" onclick="more(this);">+</a> 
<br> 
<label id="showMore" style="display: none;"> 
    Year 
    <input id="comment" name="comment" size="40" type="text" value="" /> 
</label>

A demo: http://jsfiddle.net/uSqcg/

Źródło

2013-05-27 19:26:59 tymeJV

utworzyć elementu div, należy utworzyć regułę CSS, aby to domyślnie ukryte, na elemencie div dodać onmouseover i onmouseout wydarzeń i mieć następujące funkcje związane z tymi:

function showSomething(textToShow, container) { 
    var yourElement = $('#yourDivElement'); 
    yourElement.removeClass('hidden'); 

    var w = container.getClientRects()[0].width; 
    var h = container.getClientRects()[0].height; 
    var t = container.getClientRects()[0].top; 
    var l = container.getClientRects()[0].left; 

    var st = document.documentElement.scrollTop; 
    var sl = document.documentElement.scrollLeft; 

    if (st == 0 && document.body.scrollTop > st) 
     st = document.body.scrollTop; 

    if (sl == 0 && document.body.scrollLeft > sl) 
     sl = document.body.scrollLeft; 

    yourElement.css('top', t + st + h/3 * 2); 
    yourElement.css('left', l + sl + w/3 * 2); 

    yourElement.html(textToShow); 

    var lines = textToShow.length/20; 
    yourElement.css('height', 20 + lines * 10); 
} 

function hideSomething() { 
    $('#yourDivElement').addClass('hidden'); 
}

na wszelki wypadek (reguła CSS, aby ukryć)

.hidden { 
    display: none; 
}

i ... na wszelki wypadek

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

będzie umieszczenie okna pływającego (coś jak alt) związanych z obiektu nadrzędnego swojego div (jeden zawierający swoją elementu div) ...

proste;)

Źródło

2013-05-27 19:32:57 OscarG

Spróbuj tego kodu, tutaj jest demo

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.advanced').click(function() 
     { 
     $('#hide').toggleClass("hidden"); 
     }); 
    }); 
</script> 
<style> 
.hidden 
{ 
    display:none; 
} 
</style> 
</head> 
<body> 
     <form > 
     <label> 
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
     </label><br/> 
     <label> 
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
     </label><br/> 
     <label class="advanced"> 
      + 
     </label><br/> 
     <label id="hide" class="hidden"> 
      Year 
      <input id="comment" name="comment" size="40" type="text" value="" /> 
     </label> 
    </form> 
</body> 
</html>

Źródło

2013-05-27 19:43:48

Ukryj/pokaż zaawansowaną opcję przy użyciu JavaScript

Odpowiedz

Powiązane problemy