Nascondi/mostra l'opzione avanzata utilizzando JavaScript

Sto creando un modulo HTML e vorrei che alcuni campi fossero in "Opzioni avanzate". Voglio creare un link "Opzioni avanzate", magari con un segno "più", in modo che quando l'utente fa clic sul link o sul segno, questi campi avanzati vengano visualizzati. Come posso farlo in JavaScript? Ho provato a cercare qualcosa come "Nascondi/mostra l'opzione avanzata" su Google, ma non riesco a trovare una soluzione.Nascondi/mostra l'opzione avanzata utilizzando 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>

Ad esempio, qui voglio che il campo "commento" sia avanzato.

fonte

2013-05-27 Mika H.

hai provato ancora nulla? –

@ExplosionPills Sì, ho provato a cercare una soluzione. Non sono sicuro di quale funzione JavaScript potrebbe fare ciò. Potresti per favore dare un suggerimento? –

usa il nome della classe CSS (o l'attributo di stile) per nascondere le tue opzioni avanzate. Usa una funzione JavaScript per rimuovere la classe (o l'attributo di stile) quando fai clic sul link "mostra opzioni avanzate". –

<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>

Sarà nascondere l'elemento AdvancedOptions il carico, quando si fa clic sul tag che controllerà se i AdvancedOptions è nascosto, se è allora verrà mostrato se non è nascosto sarà nasconderlo. Avrai bisogno;

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

nella parte superiore della pagina che si sta utilizzando, so che è JQuery, ma sarebbe utile per imparare JQuery riferimento per i futuri

fonte

2013-05-27 19:21:51 user2406160

Questo ha funzionato per me, ma la pagina si ricaricherà ogni volta e il mio modulo perderebbe il suo input. Per risolvere questo problema: ho dovuto sostituire '$ ('. Advanced'). Click (function() {' con '$ ('. Advanced'). Click (function (e) {' e quindi la riga successiva aggiunge 'e .preventDefault(); ' – Daniel

Siete alla ricerca di qualcosa di simile (Pure 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 = "+"; 
    } 
}

Questa funzione controlla la visibilità del contenuto, se è nascosto, lo mostra e viceversa. Cambia anche il segno più a meno. Ecco il codice HTML rivisto:

<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>

e una demo: http://jsfiddle.net/uSqcg/

fonte

2013-05-27 19:26:59 tymeJV

creare un elemento div, creare una regola CSS di averlo nascosto per impostazione predefinita, il tuo elemento div aggiungere eventi onmouseover e onmouseout, e hanno il seguenti funzioni associate a quelle:

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

solo nel caso (una regola CSS per nascondere)

.hidden { 
    display: none; 
}

e ... nel caso in cui

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

questo posizionerà la finestra flottante (qualcosa come un alt) relative al l'oggetto principale del vostro div (quella che contiene il vostro elemento div) ...

semplice;)

fonte

2013-05-27 19:32:57 OscarG

provare questo codice, ecco il 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>

fonte

2013-05-27 19:43:48

Nascondi/mostra l'opzione avanzata utilizzando JavaScript

risposta

Problemi correlati