Auf meiner Seite befindet sich ein Dropdown-Menü, und es gibt ein Texteingangsfeld und ein Bild-Upload-Feld. Das Texteingangsfeld wird standardmäßig angezeigt, während das Bild -Upload -Feld im Bild versteckt ist.
Angenommen, es gibt zwei Elemente A und B im Dropdown-Menü, ich möchte diesen Effekt erzielen: Wenn Sie auf A klicken, wird das Texteingangsfeld angezeigt und das Bildeingangsfeld versteckt; Beim Klicken auf B wird das Bild -Upload -Feld angezeigt und das Texteingangsfeld ist versteckt . Wie implementiere ich es?
Beim Debuggen mit Firebug stellte ich fest, dass beim Laden der HTML -Seite nur wenige Klickfunktionen ausgeführt werden. Klicken Sie nach dem Laden der Seite auf den Dropdown-Menüelement, und diese Haltepunkte werden nicht ausgeführt. Was ist los?
Mein JS -Code ist wie folgt (definiert im Abschnitt <Head>):
<script type = "text/javaScript"> // image_upload ist die ID des Bild -Upload -Felds. Am Anfang ausblenden Sie es $ (dokument). Ich möchte, dass diese Funktion das Texteingangsfeld implementiert, wenn Sie auf dieses Menüelement klicken. Dropdown-Menüelement. Beim Klicken wird das Textfeld versteckt und das Bild -Upload -Feld angezeigt. */$ ('image_only'). click (function () {$ ("#text_input"). hide (); $ ("#image_Upload"). show ();}); </script>Der vollständige Code lautet wie folgt. Ich befürchte, dass die obigen Informationen nicht ausreichen:
<! DocType html> <html Lang = "en"> <kopf> <titels> Hallo, Welt </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1,0"> <meta http-äquiv = "Inhalt-type" content = "text/html; charset = utf- href="css/bootstrap.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script><script src="js/bootstrap.min.js"></script><script src = "js/bootstrap-fileUpload.js"> </script> <style> .center {width: auto; Anzeige: Tabelle; Margin-Top: 150px; {Margin-Top: 30px; Anzeige: Tabelle; Margin-Links: Auto; Margin-Right: Auto; 34px;} </style> <script type = "text/javaScript"> $ (Dokument) .ready ( function () {$ ("#image_Upload"). hide ();}); $ ('#text_only'). click (function (e) {$ ("#text_input"). show (); $ ("#image_Upload"). Hide (); k (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); type="text/javascript"></script></head><body><h1>hello,world</h1><div><div><ul><li><a href="#">Home</a></li><li><a data-toggle="dropdown" href="#">Singlemodal<b> </b> </a><ul > <li><a id = "text_only" href = "#"> text </a> </li> </ul> <li> <a data-toggle = "Dropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "text_only" href = "> text </li> </li> </li> <li> <> </#"> text </a> </li> </li> </li> </> </#"> </li> </li> </li> <li> </#"> text </a> </li> </li> <- data-toggle = "Dropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "beaufsichtigt" href = "#"> beaufsichtigt </a> </li> <li> <a id = "unaufgeordnet" href = "#"> ungesundiges </a> </a> </a> id = "ungeachtet" </li></ul></li></ul></div><!-- end of navbar --><div><form><fieldset><input id="text_input" type="text" placeholder="Text input"></br><div id="image_upload" data-provides="fileupload"><!-- <input type="hidden" value="" name=""> --><div><div><i></i> <span></span></div><span><span>Select file</span><span>Change</span><input type="file" /></span><a href="#" data-dismiss="fileupload">Remove</a></div></div><button type="submit"> Search </button> </br> </fieldset> </form> </div> </div> </body> </html>Bootstrap klickt auf den Dropdown-Menüelement und zeigt einen neuen Eingabefeld-Implementierungscode an. Ich hoffe, es wird für alle hilfreich sein!